Improve mobile responsiveness across UI components and layouts#61
Merged
antosubash merged 17 commits intomainfrom Apr 3, 2026
Merged
Improve mobile responsiveness across UI components and layouts#61antosubash merged 17 commits intomainfrom
antosubash merged 17 commits intomainfrom
Conversation
Redesign the entire frontend for mobile-first responsive behavior: Core layout changes: - Sidebar: hidden off-screen on mobile with slide-in overlay + backdrop, always visible on md+ breakpoint. Added SidebarBackdrop component and useIsMobile hook for responsive behavior. - PageHeader: stack title/actions vertically on mobile, side-by-side on sm+ - Container: added responsive vertical padding (py-4 sm:py-6) - PageShell: responsive spacing (space-y-4 sm:space-y-6) - DataGrid: horizontal scroll wrapper for tables on mobile, stacked pagination controls on small screens - Theme CSS: mobile-first sidebar layout with overlay/backdrop pattern, responsive heading sizes, touch-friendly input padding, responsive card and dashboard card styling, table-responsive utility class Module page updates (all 13 modules): - Tables wrapped in overflow-x-auto containers for horizontal scrolling - Filter bars stack vertically on mobile, horizontal on sm+ - Grid layouts start at 1 column, scale up at sm/md/lg breakpoints - Form card padding reduced on mobile (p-4 sm:p-6) - Button groups use flex-wrap for proper wrapping on narrow screens - Detail/info rows stack vertically on mobile - Landing page uses responsive font sizes and stacked CTA buttons
- Unify focus trap selector in PublicLayout overlay - Return focus to trigger element on sidebar/overlay close - Guard against duplicate event listeners on Blazor re-navigation - Hide "Log in" button on mobile (shown in overlay instead)
- ModuleNav: hidden sm:flex → hidden md:flex - MainLayout: hidden sm:inline-flex → hidden md:inline-flex - Rebuild Tailwind CSS to include new component classes
The TailwindBuild msbuild target only tracked Styles/**/*.css for incremental builds. Changes to the shared theme or Blazor layout components wouldn't trigger a CSS rebuild. Now tracks: - packages/SimpleModule.Theme.Default/theme.css - framework/SimpleModule.Blazor/Components/**/*.razor
Resolve conflicts between main's i18n translations and our branch's mobile-responsive CSS classes across 29 module page files.
The app-layout flex container was using row direction by default, causing the mobile header and content to sit side-by-side instead of stacking vertically. Column direction works for both mobile (header above content) and desktop (sidebar is position:fixed).
…igation - Add onclick handler to all sidebar links to close mobile sidebar - Add MutationObserver to detect Inertia SPA navigations and update the active link highlighting client-side (since Blazor SSR layout is only rendered once, not on each Inertia navigation)
Deploying simplemodule-website with
|
| Latest commit: |
45afa30
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://38a58782.simplemodule-website.pages.dev |
| Branch Preview URL: | https://claude-mobile-first-redesign.simplemodule-website.pages.dev |
antosubash
force-pushed
the
claude/mobile-first-redesign-5kL0W
branch
from
c502c10 to
45afa30
Compare
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.
Summary
This PR enhances mobile responsiveness throughout the application by implementing responsive spacing, typography, and layout adjustments. The changes ensure better visual hierarchy and usability on smaller screens while maintaining the desktop experience.
Key Changes
Spacing & Layout
space-y-4 sm:space-y-6) to major page containers and shellsgrid-cols-1 sm:grid-cols-2 lg:grid-cols-3)gap-3 sm:gap-4) across filter bars, form fields, and card gridsflex-col gap-2 sm:flex-row)Typography
text-xl sm:text-2xl, h2:text-lg sm:text-xl, h3:text-base sm:text-lg)Form & Input Elements
px-3 py-2.5 sm:px-4 sm:py-3)w-full sm:w-[160px])Tables & Data Display
overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0)p-4 sm:p-6)Cards & Components
rounded-xl sm:rounded-2xl)Sidebar Navigation
useIsMobile()hookTheme Updates
.table-responsiveutility class for consistent table scrolling behaviorImplementation Details
sm:,lg:) consistently throughouthttps://claude.ai/code/session_01Xoj8QDK1pEeizbxLYbfP9G