Skip to content

fix: make download model modal buttons scale on mobile screen widths#245

Closed
zylitoL wants to merge 1 commit intoCSSLab:mainfrom
zylitoL:download-model-modal-mobile-scaling
Closed

fix: make download model modal buttons scale on mobile screen widths#245
zylitoL wants to merge 1 commit intoCSSLab:mainfrom
zylitoL:download-model-modal-mobile-scaling

Conversation

@zylitoL
Copy link

@zylitoL zylitoL commented Feb 27, 2026

This PR enhances the DownloadModelModal to be robust across all screen sizes and content lengths, specifically addressing edge-case behavior on narrow and short viewports.

Key Functional Behaviors:

  1. Responsive Scaling (Width):

    • Replaced fixed heights with vertical padding (py-1.5 mobile / md:px-4 desktop).
    • Behavior: On narrow screens (e.g., 375px) where button text wraps, the button height scales naturally while maintaining consistent internal spacing. It no longer crowds the borders.
  2. Internal Scrolling (Height):

    • Added max-h-[90vh] and overflow-y-auto to the modal body.
    • Pinned Actions: The Header (Title) and Footer (Progress/Buttons) are pinned (flex-shrink-0).
    • Behavior: On short viewports (e.g., 768x422 landscape), the modal remains fully contained on screen. Only the middle description scrolls, ensuring the "Download" action is always visible and reachable.
  3. Smart Scrollbars:

    • Uses overflow-y-auto.
    • Behavior: The scrollbar is only injected by the browser when the content actually exceeds the available height, adhering to minimalist design principles.

Verified on:

  • iPhone SE (375x667) - Button wrapping handled.
  • Landscape Mobile (768x422) - Internal scrolling handled.
  • Desktop (1440x900) - Standard appearance preserved.

@vercel
Copy link

vercel bot commented Feb 27, 2026

@zylitoL is attempting to deploy a commit to the Maia Platform Team on Vercel.

A member of the Team first needs to authorize it.

@zylitoL zylitoL marked this pull request as draft February 27, 2026 22:38
@zylitoL zylitoL force-pushed the download-model-modal-mobile-scaling branch from cb13079 to b3e43ee Compare February 27, 2026 22:59
@zylitoL zylitoL force-pushed the download-model-modal-mobile-scaling branch from b3e43ee to e9a4f64 Compare February 28, 2026 00:03
@zylitoL zylitoL closed this Feb 28, 2026
@zylitoL zylitoL deleted the download-model-modal-mobile-scaling branch February 28, 2026 00:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant