fix(layout): scale desktop layouts to laptop sizes; add safe-area insets - #5
Merged
Merged
Conversation
The three-column desktop layouts were keyed to the `md` (768 px)
breakpoint with hard-coded pixel widths (260 / 540 / 720). On iPad
portrait and narrow laptops (768–1023 px) those widths overflowed,
so the desktop chrome rendered broken.
* Move the desktop/mobile boundary from `md` to `lg` (1024 px).
Every route shell, the AdminSidebar `desktop-only` mode, the bottom
nav, and `useIsMobile` switch in lockstep so tablets now use the
centered max-w-md mobile layout (which works) instead of a malformed
desktop one.
* Make the desktop columns fluid above `lg`:
- DesktopReview: queue `w-56 xl:w-[260px]`, hero drops the fixed
width and runs on `flex-1 min-w-0`.
- DesktopListingDetail: media column drops `w-[720px] shrink-0` and
runs on `flex-[2] min-w-0` alongside the existing `flex-1` info
column.
- Every desktop page chrome switches from `px-10` to `px-6 lg:px-10`.
* Guard small-phone overflow on the searches list (wrap, truncate,
whitespace-nowrap on the active/paused badge and stats row).
* Add `env(safe-area-inset-bottom)` padding to the bottom nav and the
listing-detail sticky CTA so they sit above the home indicator on
notched iPhones; devices without an inset keep the original gap.
Also gitignore the per-feature `worktrees/` directory used to run each
improvement on its own branch.
Verification: typecheck, biome ci and the 154-test suite all pass.
Auth-gated screens need a visual check by running `bun run dev` on
the branch (browser verification against prod hits Cloudflare Access,
not the gaff UI itself).
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Free Run ID: 📒 Files selected for processing (19)
WalkthroughThis PR shifts the responsive design breakpoint from ChangesResponsive Breakpoint Migration to 1024px (lg)
Git Configuration
🎯 3 (Moderate) | ⏱️ ~25 minutes Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
This was referenced May 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The three-column desktop layouts were keyed to the
md(768 px) breakpoint with hard-coded pixel widths:DesktopReview— queuew-[260px]+ herow-[540px]DesktopListingDetail— media columnw-[720px] shrink-0DesktopSearches/DesktopShortlist—px-10page gutters everywhereOn iPad portrait and narrow laptops (768–1023 px) those widths overflowed and the desktop chrome rendered broken. Some mobile-side overflow and notched-iPhone safe-area gaps also went unhandled.
What changed
1. Move the desktop/mobile boundary from
md(768 px) tolg(1024 px)Every route shell, the
AdminSidebardesktop-onlymode, the bottom nav, anduseIsMobile()switch in lockstep. Tablets now get the centredmax-w-mdmobile layout (which actually fits) instead of a malformed desktop one.src/hooks/use-mobile.tsMOBILE_BREAKPOINT768 → 1024src/components/layout/admin-sidebar.tsxhidden md:contents→hidden lg:contentssrc/components/layout/bottom-nav.tsxmd:hidden→lg:hiddensrc/routes/{index,shortlist,searches/index,searches/new,searches/\$id,settings/household,listings/\$clusterId}.tsxmd:hidden→lg:hidden2. Make the desktop columns fluid above
lgDesktopReview— queuew-56 xl:w-[260px], hero drops the fixed width and runs onflex-1 min-w-0.DesktopListingDetail— media column dropsw-[720px] shrink-0and runs onflex-[2] min-w-0alongside the existingflex-1info column.px-10topx-6 lg:px-10(review, listing detail top bar, searches, shortlist, search-create header, search-form, cost-estimate sticky bar).3. Guard small-phone overflow on the searches list
/searchescards used ajustify-betweenflex with a non-truncating title; on a 360 px-wide phone the active/paused badge could collide. Now:flex-wrap,min-w-0 truncateon the title,shrink-0 whitespace-nowrapon the badge, andflex-wrap gap-y-1on the stats row.4. Safe-area insets on the sticky bottom UI
pb-[env(safe-area-inset-bottom)]so the tab labels clear the home indicator on notched iPhones.pb-[max(1.75rem,calc(env(safe-area-inset-bottom)+0.5rem))]. Devices without an inset (Android, older iPhones, desktop browsers) keep the original 28 px gap; notched iPhones getsafe-area + 8 px.5. Infra
.gitignorenow ignores the per-featureworktrees/directory used to run each improvement on its own branch (this is item 1 of a 6-item improvement series).Verification
bun run typecheck✅bun run lint:ci✅bun run test— 154 tests, all pass ✅Browser-verification against prod isn't useful here because the gaff app sits behind Cloudflare Access OTP — the public URL just shows Cloudflare's own sign-in page. Please pull the branch and
bun run devon your devices (phone, iPad portrait, laptop, external monitor) to confirm the auth-gated screens (Review, Listings, Shortlist, Searches) look right at each size. Specifically worth eyeballing:w-56(224 px).w-[260px].Next in the series
This is PR #1 of 6 (each on its own worktree):
Summary by CodeRabbit
Release Notes
Style
Chores