fix(nav): align mobile compose FAB and scroll-to-top as a 48px circle pair

[feruzm]

What & why

Follow-up polish to the recent mobile nav changes. On mobile the bottom-right compose FAB rendered as a horizontal pill instead of a circle, and it did not line up with the bottom-left scroll-to-top button (different size and different bottom offset).

Root cause of the pill shape

The FAB is a <Button>. The Button component injects its md size class h-[2.125rem] (34px), which won over the FAB's h-14 (56px): height was clamped while w-14 (56px) stuck. !rounded-full on a 56x34 box renders as a stadium/pill, which is exactly what showed on the device.

Changes

• Compose FAB (navbar-mobile.tsx): force a true circle with !h-12 !w-12 (48px) so the height beats the Button's injected size class. Bottom offset unchanged (it was already nicely placed).
• Scroll-to-top (scroll-to-top/_index.scss, mobile only): match the FAB at a 48px circle and the same safe-area-inset-bottom + 4.75rem bottom (was 40px @ +5.5rem). Desktop is untouched (stays 40px). Also matches the FAB's in-app (RN) bottom so the pair stays level in the native webview too.

Result

Two identical 48px circles, level on opposite bottom corners: a clean matched pair, with the same blue and the same icon size (20px).

Verification

• navbar-mobile.spec.tsx: 7/7 pass
• ESLint on changed file: clean
• Typecheck: no new errors introduced by these files (only pre-existing repo-wide errors, unrelated)

CSS-only / positioning change, no logic touched. Best reviewed on a mobile viewport (< 768px).

Summary by CodeRabbit

• Style
  • Adjusted mobile compose button sizing for improved visual balance.
  • Repositioned scroll-to-top button on mobile to better align with bottom navigation layout.

[greptile-apps]

Greptile Summary

This is a CSS/positioning polish PR that fixes the mobile compose FAB rendering as a pill and aligns it with the scroll-to-top button as a matched 48 px circle pair.

• navbar-mobile.tsx: Swaps h-14 w-14 for !h-12 !w-12 on the compose FAB so that Tailwind's !important prefix beats the Button component's injected height class (h-[2.125rem]), producing a true 48×48 px circle rather than a 56×34 px stadium/pill.
• scroll-to-top/_index.scss: Adds an explicit width: 48px; height: 48px and adjusts bottom from 5.5rem to 4.75rem inside the mobile media query to mirror the FAB's existing position; adds a body.is-inapp-browser & sub-rule at 7rem to match the FAB's React Native webview offset.

Confidence Score: 5/5

Safe to merge — two isolated CSS/positioning changes with no logic or data-flow impact.

Both changes are narrow and self-consistent: the !important Tailwind utilities are the correct mechanism for overriding injected component size classes, the SCSS mobile query is properly scoped, and the body.is-inapp-browser & nesting mirrors the existing isInRn conditional in the TSX. The sibling-selector adjustments for .announcement-container and .floating-faq-button remain spatially unaffected because those elements live on the opposite horizontal side of the screen from the scroll-to-top button. No logic, API, or state is touched.

No files require special attention.

Important Files Changed

Filename	Overview
apps/web/src/features/shared/navbar/navbar-mobile.tsx	Replaces h-14 w-14 (56px, pill shape due to Button's injected height override) with !h-12 !w-12 (48px) using Tailwind's !important prefix to correctly enforce a circular shape on the compose FAB; comments added to explain the intent.
apps/web/src/features/shared/scroll-to-top/_index.scss	Mobile breakpoint now explicitly sizes the scroll-to-top to 48×48 px and aligns its bottom offset to calc(env(safe-area-inset-bottom) + 4.75rem), matching the FAB; adds an is-inapp-browser sub-rule (7rem) to mirror the FAB's in-app bottom in the RN webview.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Viewport width] -->|≥ 768px desktop| B[scroll-to-top: 40×40 px\nright: 20px, bottom: 20px]
    A -->|< 768px mobile| C{is-inapp-browser?}
    C -->|No| D[scroll-to-top: 48×48 px\nleft: 16px\nbottom: env safe-area + 4.75rem]
    C -->|Yes RN webview| E[scroll-to-top: 48×48 px\nleft: 16px\nbottom: 7rem]

    F[Compose FAB navbar-mobile.tsx] --> G{isInRn?}
    G -->|No| H[right: 1rem\nbottom: env safe-area + 4.75rem\n!h-12 !w-12 = 48px circle]
    G -->|Yes| I[right: 1rem\nbottom: 7rem\n!h-12 !w-12 = 48px circle]

    D -.->|matched pair| H
    E -.->|matched pair| I

Loading

_{Reviews (1): Last reviewed commit: "fix(nav): align mobile compose FAB and s..." | Re-trigger Greptile}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 08498a5c-eeb4-4f4b-b4a6-a9f8012bfe4a

📥 Commits

Reviewing files that changed from the base of the PR and between 67884ec and 9c33129.

📒 Files selected for processing (2)

• apps/web/src/features/shared/navbar/navbar-mobile.tsx
• apps/web/src/features/shared/scroll-to-top/_index.scss

---

📝 Walkthrough

Walkthrough

Mobile floating action buttons (compose FAB and scroll-to-top) are resized and repositioned for coordinated layout on mobile devices. The compose button is reduced from 56px to 48px, and the scroll-to-top button is adjusted to match with updated safe-area inset calculations and conditional styling for in-app browser contexts.

Changes

Mobile floating button alignment

Layer / File(s)	Summary
Mobile compose FAB sizing apps/web/src/features/shared/navbar/navbar-mobile.tsx	Compose floating action button size classes reduced from h-14 w-14 to !h-12 !w-12, forcing a 48px circular shape instead of 56px.
Scroll-to-top mobile repositioning and safe-area alignment apps/web/src/features/shared/scroll-to-top/_index.scss	Scroll-to-top button resized to 48px width/height, shifted from right-aligned to left-aligned, bottom offset updated to calc(env(safe-area-inset-bottom) + 4.75rem), with conditional body.is-inapp-browser override setting bottom: 7rem.

Possibly related PRs

• ecency/vision-next#869: Both PRs touch the mobile UI in the same spots—adjusting apps/web/src/features/shared/navbar/navbar-mobile.tsx compose FAB presentation and updating the mobile .scroll-to-top placement in apps/web/src/features/shared/scroll-to-top/_index.scss—so the changes are directly related at the code level.
• ecency/vision-next#867: Both PRs modify the mobile compose FAB in apps/web/src/features/shared/navbar/navbar-mobile.tsx (styling/behavior around the floating compose button, coordinated with the hide-on-scroll changes).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 Two buttons dance on mobile screens,
Resized to forty-eight, so lean,
Safe-area math keeps spacing true,
Floating FABs now match their cue! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 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: aligning two mobile UI components (compose FAB and scroll-to-top button) as 48px circles, which matches the primary objective of the pull request.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bugfix/mobile-fab-totop-alignment

---

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