fix: reduce max-width breakpoint values by 1px

[DamianGlowala]

🔗 Linked issue

resolves #1235

📚 Description

This addresses a bug with off by one values for breakpoints using max-width media query.

[cloudflare-workers-and-pages]

Deploying nuxt-image with    Cloudflare Pages

Latest commit:	187f862
Status:	✅  Deploy successful!
Preview URL:	https://fbf50966.nuxt-image.pages.dev
Branch Preview URL:	https://fix-off-by-one-max-width.nuxt-image.pages.dev

View logs

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@2132

commit: 187f862

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adjusts responsive image breakpoint calculations by reducing media query thresholds by 1 pixel. The primary change modifies src/runtime/image.ts to generate media queries using max-width: (N-1) px instead of max-width: N px. Correspondingly, test snapshots in both test/nuxt/image.test.ts and test/nuxt/picture.test.ts are updated to reflect the new breakpoint values (e.g., 500px becomes 499px, 900px becomes 899px). These changes affect the sizes and srcset attributes generated for responsive images across multiple test scenarios, including density variants, placeholder behavior, and format-specific source elements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, explaining the bug being fixed and referencing the linked issue.
Linked Issues check	✅ Passed	The code changes directly address the linked issue by adjusting breakpoint calculations from max-width: N px to max-width: (N-1) px to align with Tailwind's responsive breakpoints.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the off-by-one breakpoint issue in image rendering and updating corresponding test snapshots accordingly.
Title check	✅ Passed	The title clearly and concisely describes the main change: reducing max-width breakpoint values by 1px to fix the off-by-one bug in media query generation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/off-by-one-max-width

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov-commenter]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 6.83%. Comparing base (67b40ac) to head (187f862).

Files with missing lines	Patch %	Lines
src/runtime/image.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@          Coverage Diff          @@
##            main   #2132   +/-   ##
=====================================
  Coverage   6.83%   6.83%           
=====================================
  Files         80      80           
  Lines       3729    3729           
  Branches     142     142           
=====================================
  Hits         255     255           
  Misses      3424    3424           
  Partials      50      50           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.