Skip to content

fix(web): Resolve mobile overflow in settings layout and navigation - #165

Merged
KiwiGaze merged 5 commits into
stagingfrom
fix/settings-mobile-overflow
Mar 3, 2026
Merged

fix(web): Resolve mobile overflow in settings layout and navigation#165
KiwiGaze merged 5 commits into
stagingfrom
fix/settings-mobile-overflow

Conversation

@KiwiGaze

@KiwiGaze KiwiGaze commented Mar 3, 2026

Copy link
Copy Markdown
Owner

Summary

  • prevent horizontal overflow in the protected settings layout on mobile viewports
  • constrain integration selector row/content sizing so controls do not force page overflow
  • update settings navigation container behavior to keep content within viewport bounds

How to test

  • open settings on a narrow/mobile viewport
  • navigate across settings sections and verify no horizontal scroll appears
  • verify integration rows/selectors remain usable without clipping or overflow

Related

  • none

Summary by CodeRabbit

  • Style
    • Improved responsive layouts and spacing across settings, integrations, and selectors for better mobile/desktop behavior.
    • Enhanced text truncation and wrapping by adding min-width/shrink behavior to flex containers.
    • Adjusted alignment and padding to preserve visual spacing across breakpoints.
  • Accessibility
    • Navigation links now expose current-page state for improved screen-reader feedback.
  • New Features
    • Added a viewport meta tag for improved mobile scaling.

@coderabbitai

coderabbitai Bot commented Mar 3, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b12bbd and 88835db.

📒 Files selected for processing (1)
  • apps/web/components/settings/settings-nav.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/web/components/settings/settings-nav.tsx

Walkthrough

Layout and responsive updates across settings, integrations, and app root: added min-w-0 to flex containers, converted fixed widths to responsive w-full/sm: widths, reworked integration components' flex behavior, and replaced mobile settings nav with a horizontally scrollable row; added a default Head component and adjusted body classes.

Changes

Cohort / File(s) Summary
Settings layout & navigation
apps/web/app/(protected)/settings/layout.tsx, apps/web/components/settings/settings-nav.tsx
Added min-w-0 to flex containers; restructured mobile settings nav to a full-width, horizontally scrollable flex row using overflow-x-auto, min-w-max, shrink-0, and whitespace-nowrap; preserved active state handling (aria-current) and motion overlay.
Integration components (responsive/layout)
apps/web/components/integrations/integration-row.tsx, apps/web/components/integrations/primary-calendar-selector.tsx, apps/web/components/integrations/primary-task-list-selector.tsx
Converted fixed width elements to responsive w-full with sm: overrides, added min-w-0 to ensure truncation, adjusted flex direction/gaps for small screens, and changed action/trigger alignment and spacing while keeping existing selection and API behaviors.
App root & head
apps/web/app/head.tsx, apps/web/app/layout.tsx
Added export default function Head() rendering viewport meta; removed empty <head /> and added w-full to the <body> class list.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 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 Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes in the pull request: fixing mobile overflow issues in settings layout and navigation by adding responsive constraints and min-width properties.
Peer Dependency Consistency ✅ Passed No package.json files were modified in this PR; all changes are limited to UI components and layout files in apps/web/.
Api Contract Layer Conventions ✅ Passed The custom check for API contract layer conventions applies to new or modified Next.js API route handlers. Git verification confirms this PR modifies zero API route files.

✏️ 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/settings-mobile-overflow

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

@KiwiGaze
KiwiGaze marked this pull request as ready for review March 3, 2026 13:29

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/web/components/settings/settings-nav.tsx (1)

59-67: Add aria-current on active mobile links for better screen-reader context.

Active state is currently visual; adding aria-current="page" improves nav accessibility with minimal change.

♿ Suggested update
                 <Link
                   key={item.href}
                   href={item.href}
+                  aria-current={isActive ? "page" : undefined}
                   className={cn(
                     "relative flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
                     isActive
                       ? "text-foreground"
                       : "text-muted-foreground hover:text-foreground",
                   )}
                 >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/components/settings/settings-nav.tsx` around lines 59 - 67, The Link
elements rendering each nav item (the JSX using Link with key={item.href},
href={item.href}, className={cn(...)} and the isActive conditional) need an
accessibility attribute: when isActive is true add aria-current="page" to the
Link to expose the active state to screen readers; update the Link props so
aria-current={isActive ? "page" : undefined} (or only include the attribute when
isActive) so mobile active links announce current page.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/web/components/settings/settings-nav.tsx`:
- Around line 59-67: The Link elements rendering each nav item (the JSX using
Link with key={item.href}, href={item.href}, className={cn(...)} and the
isActive conditional) need an accessibility attribute: when isActive is true add
aria-current="page" to the Link to expose the active state to screen readers;
update the Link props so aria-current={isActive ? "page" : undefined} (or only
include the attribute when isActive) so mobile active links announce current
page.

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ae6e8fb and 4b291a1.

📒 Files selected for processing (5)
  • apps/web/app/(protected)/settings/layout.tsx
  • apps/web/components/integrations/integration-row.tsx
  • apps/web/components/integrations/primary-calendar-selector.tsx
  • apps/web/components/integrations/primary-task-list-selector.tsx
  • apps/web/components/settings/settings-nav.tsx

@KiwiGaze
KiwiGaze merged commit d6c1ec2 into staging Mar 3, 2026
5 checks passed
@KiwiGaze
KiwiGaze deleted the fix/settings-mobile-overflow branch March 3, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant