fix: adapt to the head

[James-9696]

Summary by CodeRabbit

• Responsive Design

  • Updated responsive layout breakpoints for viewports between 1400px and 1576px
  • Adjusted header navigation spacing across multiple sections
  • Modified dropdown menu width dimensions
  • Updated home page responsive styling for wider screens (815px and above)

• Chores

  • Updated SDK subproject reference

[coderabbitai]

Warning

Rate limit exceeded

@James-9696 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 16 minutes and 48 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 006e98f9-2bea-4a4e-9456-c3f74a83c5c5

📥 Commits

Reviewing files that changed from the base of the PR and between b2c42c5 and 217f02d.

📒 Files selected for processing (1)

• packages/common/src/components/responsive.less

Walkthrough

This PR adjusts responsive design breakpoints across the opentiny.design system, consolidating the header and app layout breakpoints from 1475/1476px to 1400px. The changes restructure header media query rules, add dropdown styling, introduce new spacing adjustments for intermediate viewport widths, and align the app layout rules. A genui-sdk subproject reference is also updated.

Changes

Responsive Breakpoint Consolidation

Layer / File(s)	Summary
Header responsive breakpoint restructuring packages/common/src/components/responsive.less	Updated .opentiny-design-header responsive rules: changed the max-width threshold from 1475px to 1400px, added .dropdown-app width styling within the 1400–1576px range, and introduced a new 1400–1475px media block to adjust nav spacing (.nav-left margin-right: 48px, .nav-center .top-menu margin-right: 20px, .nav-right .mg-r margin-right: 20px).
App layout breakpoint alignment packages/home/src/index.less	Updated the #app media query boundary from max-width: 1476px to max-width: 1400px, synchronizing when app margin-top and height rules apply with the consolidated header breakpoint.
SDK subproject reference update genui-sdk	Updated the genui-sdk subproject commit reference to a new revision.

🎯 2 (Simple) | ⏱️ ~8 minutes

🐰 Breakpoints dance at fourteen-hundred now,
Headers and apps align their graceful bow,
Spacing adjusted with measured care,
SDK points forward through the viewport air! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix: adapt to the head' is vague and does not clearly convey what specific changes were made. The phrase 'adapt to the head' lacks concrete detail about the actual modifications (responsive breakpoint adjustments and media query updates).	Revise the title to be more specific, such as 'fix: adjust responsive breakpoints for header layout' or 'fix: update media query breakpoints from 1476px to 1400px for header'. This would clearly indicate the main change involves responsive design updates to the header component.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-header-0403

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/common/src/components/responsive.less`:
- Line 447: The media queries overlap at the 1400px boundary causing grid and
flex rules to both apply; update the min-width media query that currently reads
"(min-width: 1400px)" (the block covering lines ~684-705 in responsive.less) to
exclude 1400px (e.g. use "(min-width: 1401px)") so the grid rule in the
"(max-width: 1400px)" block (around line 447) and the flex spacing rules no
longer activate simultaneously.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1d10e521-794d-4642-8819-af0d51afa314

📥 Commits

Reviewing files that changed from the base of the PR and between 3784da9 and b2c42c5.

📒 Files selected for processing (3)

• genui-sdk
• packages/common/src/components/responsive.less
• packages/home/src/index.less