fix: disable skew-y-[-18deg] in gecko browsers

[zinchenko291]

Firefox/Gecko suffers severe scrolling jank on the documentation pages because of the large decorative SVG in the page header.

The SVG uses both:

• mix-blend-mode: overlay
• transform: skewY(-18deg)

Removing only the transform (skew-y-[-18deg]) for firefox-base browsers makes scrolling smooth immediately.

Reproduced in:

• Firefox on Windows
• Zen on Windows
• Zen on macOS

Chromium is unaffected.

Summary by CodeRabbit

• Style
  • Reformatted the hero grid pattern styling for improved readability.
  • Added browser-specific styling to prevent skewing in browsers without support for the -moz-appearance property.

[vercel]

@zinchenko291 is attempting to deploy a commit to the NetBird GmbH Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 12ae0ee1-5158-499d-a02c-681e2b94a386

📥 Commits

Reviewing files that changed from the base of the PR and between b5ef5c2 and 6c368cc.

📒 Files selected for processing (1)

• src/components/HeroPattern.jsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The GridPattern className is reformatted and now disables its skew transform for browsers that do not support -moz-appearance. Existing visual classes remain unchanged.

Changes

Hero pattern styling

Layer / File(s)	Summary
GridPattern transform support src/components/HeroPattern.jsx	The component adds supports-[(-moz-appearance:none)]:skew-y-0 while retaining the existing fill, stroke, blend, and dark-mode classes.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to 6c368

The change removes a decorative skew effect only for Gecko-based browsers to improve scrolling performance while leaving Chromium behavior unchanged. No actionable merge-blocking risk remains beyond normal checks and review.

Poem

I twitch my nose at grids of light
A skew may rest where support is slight
The pattern keeps its colors bright
With tidy lines from left to right
A careful hop makes browsers right

🚥 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: disabling the skew transform in Gecko browsers.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/components/HeroPattern.jsx

typescript-eslint does not support TS 7.0.
Please see https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0 to run typescript-eslint using the TS 6 API.
See also typescript-eslint/typescript-eslint#10940 for tracking typescript-eslint's support for TS >=7.1

Oops! Something went wrong! :(

ESLint: 9.39.5

Error: typescript-eslint does not support TS 7.0.
at Object. (/.eslint-tmp/node_modules/typescript-eslint/dist/index.js:52:11)
at Module._compile (node:internal/modules/cjs/loader:1830:14)
at Object..js (node:internal/modules/cjs/loader:1961:10)
at Module.load (node:internal/modules/cjs/loader:1553:32)
at Module._load (node:internal/modules/cjs/loader:1355:12)
at wrapModuleLoad (node:internal/modules/cjs/loader:255:19)
at Module.require (node:internal/modules/cjs/loader:1576:12)
at require (node:internal/modules/helpers:153:16)
at Object. (/.eslint-tmp/node_modules/eslint-config-next/dist/index.js:5:64)
at Module._compile (node:internal/modules/cjs/loader:1830:14)

---

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.}