The modal-input component was using inline <style> blocks with ID selectors
to apply width constraints, which had inconsistent specificity and only
applied on lg+ breakpoints. This caused modals to appear full-width instead
of being properly constrained.
Replaced the inline style approach with Tailwind utility classes following
the pattern used in modal-confirmation component:
- Removed inline <style> block with media queries
- Added min-w-full and lg:min-w-[{minWidth}] for responsive minimum width
- Added max-w-[{maxWidth}] and max-h-[calc(100vh-2rem)] for size constraints
This ensures consistent modal sizing across all breakpoints and fixes the
full-width modal issue reported when adding shared environment variables.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Previous approach used invalid inline styles with @media queries,
which browsers ignore. Now using:
- Unique modal ID generated with PHP uniqid()
- <style> tag with proper CSS media queries
- ID selector for scoped styling
This properly constrains modal width on large screens while keeping
full width on mobile.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Tailwind JIT compiler doesn't compile dynamically interpolated classes
like lg:max-w-[{{ $maxWidth }}]. Switched to inline styles with media
queries to support dynamic min/max width values.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The previous fix reduced minWidth but modal still expanded to fit
content. Now:
- Added maxWidth prop to modal-input component (default 48rem)
- Set Edit Domains modal to minWidth=32rem, maxWidth=40rem
- This constrains the modal to a reasonable size range
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes#6974
- Add max-height constraints to prevent modals from exceeding viewport
- Enable vertical scrolling with overflow-y-auto on content areas
- Improve mobile responsiveness with consistent padding
- Separate fixed header from scrollable content using flexbox
- Add touch scrolling support for iOS devices
This ensures buttons like "Back" and "Continue" remain accessible
on small devices by allowing users to scroll the modal content.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added focus-visible styles to the close button in the modal component for improved accessibility and user experience.
- Ensured consistent visual feedback when the button is focused, aligning with recent accessibility enhancements.
- Added an x-init directive to automatically focus the first input element (input, textarea, or select) when the modal is opened, enhancing user experience and accessibility.
- Added 'minWidth' attribute to modal input component for better responsiveness.
- Updated modal input instantiation in storage view to set a minimum width of 64rem.
- Improved layout and user guidance in the storage add forms by adding descriptive text for volume, file, and directory mounts.
- Changed button labels from 'Save' to 'Add' for clarity in storage forms.
