Add mobile-responsive AppShell navbar and layout fixes#724
Merged
Conversation
- Add collapsed + Burger toggle to AppShell in Layout and StandardLayout - Close navbar on route change for mobile UX - Remove hardcoded height/width from Sidebar, let AppShell manage layout - Change 100vh to 100dvh in design tokens for mobile browser compatibility - Add responsive padding (12px mobile, 24px desktop) to AppShell - Use clamp() for MainSection heading to scale on narrow viewports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- DataTable: wrap in scrollable container for horizontal overflow on mobile - TeamMemberCard: responsive image sizes (180px mobile, 250px desktop), stack image above text on small screens - SupporterCard: flex-wrap logo+text layout, responsive logo dimensions - HouseholdBuilderForm: cap fixed alert width to viewport on small screens - ImpactTooltip/WaterfallChart: tooltip maxWidth respects narrow viewports - ReportSidebar: hide on mobile (visibleFrom="sm"), use 100dvh - ReportOutputLayout: horizontally scrollable tab bar with nowrap tabs - Extract MOBILE_BREAKPOINT_QUERY constant (48em) and replace 17 hardcoded "(max-width: 768px)" media query strings across report subpages - Remove unused spacing import from Sidebar Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Cover DataTable scroll wrapper, ImpactTooltip viewport-constrained width, ReportSidebar visibleFrom/collapse behavior, HeaderContent burger toggle, MainSection responsive font, useChartDimensions breakpoint constant, and Sidebar isOpen/height fixes. New fixtures for DataTable and ReportSidebar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… mobile Replace the sidebar Burger with an ActionIcon + IconDotsVertical to differentiate it from the navigation Burger on mobile. Make the IngredientReadView header Flex stack vertically on small screens. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
On mobile, replace the side navbar + footer with a fixed bottom bar containing a "Parameters" button that opens a bottom drawer with the parameter tree. Value setter inputs stack vertically on mobile. MultiButtonFooter and MultiYearValueSelector use responsive grid cols. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
On mobile, show a fixed bottom bar with the current view label that opens a bottom drawer with the full navigation tree. Uses a full-width MobileTreeNav component instead of the desktop ReportSidebar (which has fixed 250px width). Add hideOnMobile prop to ReportSidebar for flexibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This was referenced Feb 23, 2026
MaxGhenis
added a commit
that referenced
this pull request
Feb 23, 2026
MaxGhenis
added a commit
that referenced
this pull request
Feb 23, 2026
MaxGhenis
added a commit
that referenced
this pull request
Feb 23, 2026
…yEngine/feat/mobile-optimization
MaxGhenis
added a commit
that referenced
this pull request
Feb 23, 2026
…m PolicyEngine/feat/mobile-optimization
MaxGhenis
added a commit
that referenced
this pull request
Feb 25, 2026
* fixup! Merge pull request #724 from PolicyEngine/feat/mobile-optimization * fixup! fixup! Merge pull request #724 from PolicyEngine/feat/mobile-optimization * fixup! fixup! fixup! Merge pull request #724 from PolicyEngine/feat/mobile-optimization * fixup! fixup! fixup! fixup! Merge pull request #724 from PolicyEngine/feat/mobile-optimization * fixup! fixup! fixup! fixup! fixup! Merge pull request #724 from PolicyEngine/feat/mobile-optimization * fixup! fixup! fixup! fixup! fixup! fixup! Merge pull request #724 from PolicyEngine/feat/mobile-optimization * Fix all lint errors and format migrated files Resolve 53 ESLint errors (unused imports, duplicate imports, missing button type attributes, a11y keyboard handlers) and 3 stylelint hex color warnings across 37 files. Run Prettier on all changed files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Update packageManager to bun@1.2.21 for lockfile compatibility CI was failing because the lockfile format changed between bun 1.2.0 and 1.2.21 (configVersion field removed). Update packageManager to match the version used to generate the lockfile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix TypeScript errors and Prettier formatting for CI - Remove unsupported `variant` prop from Container/Title components - Change "flex-start" to "start" for Stack/Group align prop - Replace pixel string gap values with token keys (sm/md/lg) - Replace `h` prop with style={{ height }} on Stack - Remove `size` prop from Progress component - Resolve duplicate Label identifier (Recharts vs shadcn) - Fix step prop type on VariableInput - Export SheetPortal/SheetOverlay from sheet.tsx - Fix USPlaceSelector type mismatch Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Remove unused getInputFormattingProps import Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Remove all Mantine dependencies — complete migration to Tailwind/shadcn - Replace @mantine/dates (YearPickerInput, DatePickerInput) with native HTML inputs in 3 value setter components - Remove MantineProvider from WebsiteApp, CalculatorApp, test fixtures, test utils, and Storybook config - Delete Mantine theme files (theme.ts, styles/colors.ts, styles/components.ts) - Remove @mantine/core, @mantine/dates, @mantine/hooks, eslint-config-mantine, postcss-preset-mantine from package.json - Inline ESLint rules previously provided by eslint-config-mantine - Update postcss config to remove mantine-breakpoint variables Zero @Mantine imports remain. All tests pass (2999), typecheck clean, build succeeds, lint clean. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Format date picker replacements with Prettier Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Simplify migrated components and fix lint issues Code simplification from code-simplifier review: - Fix nested ternary in MultiButtonFooter - Simplify redundant style declarations in SidebarNavItem - Convert arrow function components to function declarations - Remove unnecessary fragment wrappers - Simplify PathwayView containerContent variable - Simplify IngredientSubmissionView badge rendering - Clean up HomeHeader and HeaderBar inline styles - Add displayName to React.memo components - Format with Prettier Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix borderColor type narrowing in HouseholdSummaryCard Use const with ternary and explicit string type annotation to avoid TypeScript literal type narrowing conflict. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix Tailwind v4 prefix variant ordering: variant:tw: → tw:variant: Tailwind v4 with prefix(tw) requires the prefix before the variant (tw:lg:flex), not after (lg:tw:flex). The wrong ordering caused all responsive breakpoints and state variants to silently fail, breaking the header nav links, blog grid layout, footer layout, and hover effects across the site. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Style subscribe button with teal background to match production The shadcn Button default variant uses bg-primary which requires a base --color-primary CSS variable. Added explicit teal styling to the footer subscribe button to match the production appearance. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix dropdown navigation, country picker styling, and footer polish - Fix About dropdown: use onSelect with navigate() instead of asChild+Link (Radix DropdownMenuItem prevents default on Link clicks) - Country picker: add border, country code label, hover state - Dropdown menus: add explicit tw:bg-white background - Footer: tighten spacing, softer link colors, smaller social icons - FooterSubscribe: remove left padding, constrain input width, zero margins Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add top-level /slides route with site header/footer - Add /slides and /slides/* routes at top level (no country slug) - Embed policyengine-slides Vercel app in iframe with StaticLayout - Remove Vercel proxy rewrites for /slides (now served via React SPA) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
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
2 participants
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.
Fixes #723
Summary
collapsed: { mobile: !navbarOpened }to bothLayoutandStandardLayout, with aBurgertoggle in the header (visible belowsmbreakpoint). Navbar auto-closes on route change.h="100vh"andwidth: 300pxinline styles — let Mantine's AppShell manage dimensions.100vh→100dvh: Fix the design token so mobile browsers with dynamic toolbars (iOS Safari) don't extend content below the visible area.clamp(28px, 5vw, 48px)to scale smoothly across viewports.Test plan
🤖 Generated with Claude Code