fix: quick links widget overlap with plane ai promo on mobile

[Ayusman-Singhal]

Description

Quick Links widget text overflowed into Plane AI promo section below on mobile viewports (<640px). The "Add quick Link" button (3 words) + "Quicklinks" title in justify-between flex had no wrap behavior, causing text collision. Insufficient bottom margin made the overlap visible.

Changes

• apps/web/core/components/home/widgets/links/root.tsx two class changes:
• mb-2 → mb-2 max-sm:mb-6: triple bottom clearance on small screens, preventing bleed into next widget
• flex → flex flex-wrap gap-2: title and button wrap to separate lines with proper spacing instead of colliding

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Screenshots and Media

Test Scenarios

1. Open Home page at 360px viewport width
2. Verify Quick Links header does not overlap with Plane AI promo section
3. Resize to 640px+ and confirm layout unchanged

References

Closes #9084

Summary by CodeRabbit

• Style
  • Adjusted spacing and layout for the quick links section on the dashboard.
  • Improved header alignment and wrapping behavior for better display on smaller screens.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5184c0f5-77e9-44fa-a37d-50461b9dc51a

📥 Commits

Reviewing files that changed from the base of the PR and between 7fbf14a and d0295e4.

📒 Files selected for processing (1)

• apps/web/core/components/home/widgets/links/root.tsx

---

📝 Walkthrough

Walkthrough

Modified spacing and flex layout classes in the DashboardQuickLinks header markup, changing container margin to a responsive value and adjusting the header row to wrap with additional gap and margin.

Changes

Quick Links Layout Fix

Layer / File(s)	Summary
Responsive spacing and flex wrap fix apps/web/core/components/home/widgets/links/root.tsx	Container margin changed to mb-2 max-sm:mb-6 and header row updated to mb-4 flex ... gap-2 to prevent overlap and enable wrapping on small screens.

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

Related issues: Fixes "+ Add Quick Link" text overlapping Plane AI promotional text on mobile browser (#9084).

Suggested labels: bug, frontend, mobile

Suggested reviewers: N/A

Poem:
A rabbit hopped on mobile screens so tight,
Found two texts tangled, quite a fright,
With gap-2 and a wrap so neat,
The overlap now beats retreat,
Spacing fixed, the layout's right!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly states the mobile quick links overlap fix and matches the change.
Description check	✅ Passed	The description follows the template and includes the change summary, type, tests, and reference.
Linked Issues check	✅ Passed	The changes directly address issue #9084 by adding mobile spacing and header wrapping to prevent overlap.
Out of Scope Changes check	✅ Passed	The PR is limited to the targeted quick links layout adjustment and adds no unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[Copilot]

Pull request overview

Fixes a mobile layout issue on the Home dashboard where the Quick Links widget header could overflow/bleed into the Plane AI promo section on narrow viewports.

Changes:

• Adds extra bottom spacing on small screens for the Quick Links widget container (max-sm:mb-6).
• Allows the Quick Links header row (title + “Add” button) to wrap and adds spacing between wrapped rows (flex-wrap + gap-2).