fix: looks of header on mobile #308
Conversation
WalkthroughUpdated dependency to @fluffylabs/shared-ui@^0.2.0, switched several CSS viewport units from vh/vw to svh/svw, adjusted import order in main.tsx, removed a Tailwind Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Browser
participant Header as Header.tsx
participant SharedUI as @fluffylabs/shared-ui
Browser->>Header: render Header
Header->>SharedUI: useBreakpoint("(width > 64rem)")
Header->>SharedUI: useBreakpoint("(width > 52rem)")
alt width > 64rem
Header->>Header: render NotesButtonsGroup (if >52rem) + Version + GithubDropdownMenu
else width between 52rem and 64rem
Header->>Header: render NotesButtonsGroup + Version (no GithubDropdownMenu)
else width <= 52rem
Header->>Header: render Version only (NotesButtonsGroup hidden)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
✅ Deploy Preview for graypaper-reader ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/components/Resizable/Resizable.css (1)
3-3: Add 100vh fallback (and consider dvh) for broader mobile support.Older browsers that don’t support svh will ignore the height. Layer a vh fallback first.
- height: calc(100svh - var(--header-height)); + /* Fallback for browsers without svh support */ + height: calc(100vh - var(--header-height)); + /* Stable viewport height on modern browsers */ + height: calc(100svh - var(--header-height));Optional: consider 100svw for width to avoid rare 100vw overflow on mobile browsers with overlays.
src/tailwind.css (1)
1-1: Removing @source may drop Tailwind v4 styles for shared-ui. Re-enable it.If shared-ui components rely on Tailwind utilities, dropping @source can cause purging. Restore with a proper glob.
-/*@source "../node_modules/@fluffylabs/shared-ui/dist/";*/ +@source "../node_modules/@fluffylabs/shared-ui/dist/**/*.{js,jsx,ts,tsx}";If your app sources aren’t declared elsewhere, also include:
@source "./src/**/*.{js,jsx,ts,tsx,html}";src/App.css (1)
3-3: Add 100vh fallback before svh.Keeps layout working on older mobile browsers.
- height: 100svh; + height: 100vh; /* fallback */ + height: 100svh; /* stable viewport */src/index.css (1)
38-39: Layer vw/vh fallbacks before svw/svh.Prevents regressions on browsers without new viewport units.
- min-width: 100svw; - min-height: 100svh; + min-width: 100vw; /* fallback */ + min-height: 100vh; /* fallback */ + min-width: 100svw; /* stable viewport */ + min-height: 100svh; /* stable viewport */src/main.tsx (1)
9-15: CSS order change (shared-ui after Tailwind) and moving App import — LGTM.This cascade helps shared-ui styles layer over Tailwind preflight; loading CSS before App can reduce FOUC. Consider adding a short comment to keep this order intentional.
import "./tailwind.css"; import "@fluffylabs/shared-ui/style.css"; import "./variables.css"; import "./index.css"; import "./font.css"; +// Keep CSS order: tailwind -> shared-ui -> variables -> app styles -> fontssrc/components/Header/Header.tsx (2)
13-19: Unify endSlot into a single flex container for alignment consistency.Keeps spacing predictable and avoids relying on nested/floating siblings.
- <> - <div className="flex pl-4"> - <NotesButtonsGroup className="max-sm:hidden" /> - <Version /> - </div> - <FluffyHeader.GithubDropdownMenu className="max-sm:hidden" /> - </> + <div className="flex items-center gap-2 pl-4"> + <NotesButtonsGroup className="max-sm:hidden" /> + <Version /> + <FluffyHeader.GithubDropdownMenu className="max-sm:hidden" /> + </div>
13-19: Follow-up: align viewport units across menus.Version dropdown uses max-h-[60vh] (in Version.tsx); consider switching to svh for consistency with the rest of the PR to avoid iOS URL-bar jumps. Low priority.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
package.json(1 hunks)src/App.css(1 hunks)src/components/Header/Header.tsx(1 hunks)src/components/Header/components/NotesButtonsGroup.tsx(1 hunks)src/components/Resizable/Resizable.css(1 hunks)src/index.css(1 hunks)src/main.tsx(1 hunks)src/tailwind.css(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,jsx,ts,tsx}
⚙️ CodeRabbit configuration file
When reviewing Tailwind CSS classes, ensure they follow Tailwind 4.x conventions and suggest modern 4.x alternatives for deprecated patterns.
Files:
src/main.tsxsrc/components/Header/components/NotesButtonsGroup.tsxsrc/components/Header/Header.tsx
**/*.css
⚙️ CodeRabbit configuration file
Review CSS code with focus on Tailwind CSS 4.x best practices and conventions. Ensure compatibility with Tailwind 4.x features and syntax.
Files:
src/components/Resizable/Resizable.csssrc/index.csssrc/App.csssrc/tailwind.css
🧬 Code graph analysis (2)
src/components/Header/components/NotesButtonsGroup.tsx (1)
src/components/NotesProvider/NotesProvider.tsx (2)
NotesContext(17-17)INotesContext(19-38)
src/components/Header/Header.tsx (2)
src/components/Header/components/NotesButtonsGroup.tsx (1)
NotesButtonsGroup(8-69)src/components/Version/Version.tsx (1)
Version(16-104)
🔇 Additional comments (3)
src/components/Header/components/NotesButtonsGroup.tsx (1)
2-2: LGTM: typed FC and className pass-through are clean.Public API clarified; forwarding className to ButtonGroup enables responsive control from Header.
Also applies to: 8-8, 15-15
package.json (1)
22-22: Approve bump to @fluffylabs/shared-ui ^0.2.0 — peerDeps are only React ^19.0.0/React-DOM ^19.0.0 (our React ^19.1.0 satisfies them) andGithubDropdownMenuis exported in dist/index.{js,d.ts}.src/components/Header/Header.tsx (1)
13-19: Mobile cleanup via max-sm:hidden — looks correct.Using max-sm:hidden aligns with Tailwind 4’s breakpoint range variants. ✔️ (tailwindcss.com)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/Header/Header.tsx (2)
8-9: Use inclusive range and avoid magic numbers.Prefer >= to match typical “min-width” semantics and avoid off‑by‑one edge at exactly 64rem/52rem. Optionally extract to named constants.
- const isLargeOrWider = useBreakpoint("(width > 64rem)"); - const isCustomMediumOrWider = useBreakpoint("(width > 52rem)"); + const isLargeOrWider = useBreakpoint("(width >= 64rem)"); // ~ Tailwind lg + const isCustomMediumOrWider = useBreakpoint("(width >= 52rem)");
16-22: Remove non-standard Tailwind variant and stray class; rely on the hook.Tailwind 4.x doesn’t ship a max-sm: variant by default; these classes won’t apply. They’re also redundant due to conditional rendering. The bare “dark” class has no effect.
- <div className="rounded-md flex ml-4 z-10 dark bg-[var(--card)]"> - {isCustomMediumOrWider && <NotesButtonsGroup className="max-sm:hidden" />} + <div className="rounded-md flex ml-4 z-10 bg-[var(--card)]"> + {isCustomMediumOrWider && <NotesButtonsGroup />} <Version /> </div> - {isLargeOrWider && <FluffyHeader.GithubDropdownMenu className="max-sm:hidden" />} + {isLargeOrWider && <FluffyHeader.GithubDropdownMenu />}Also, sanity-check that FluffyHeader doesn’t already render a GH control when ghRepoName is set to avoid duplication.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/Header/Header.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
⚙️ CodeRabbit configuration file
When reviewing Tailwind CSS classes, ensure they follow Tailwind 4.x conventions and suggest modern 4.x alternatives for deprecated patterns.
Files:
src/components/Header/Header.tsx
🧬 Code graph analysis (1)
src/components/Header/Header.tsx (2)
src/components/Header/components/NotesButtonsGroup.tsx (1)
NotesButtonsGroup(8-69)src/components/Version/Version.tsx (1)
Version(16-104)
🔇 Additional comments (1)
src/components/Header/Header.tsx (1)
1-1: Verify shared-ui version compatibility for new APIs.Confirm @fluffylabs/shared-ui >= 0.2.0 is in package.json/lockfile so useBreakpoint and FluffyHeader.GithubDropdownMenu are available at runtime.
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Chores