Extract a shared forms collapsible for advanced SSH/build settings
across boarding, server creation, and application general. Support
larger modals with header actions, close the compose editor after
save via compose-save-finished, and cover the layout in tests.
Extract shared settings-layout components and a dedicated team
danger-zone page. Enable modal editing for security resources,
polish OAuth/API-token controls, and align notification and
service configuration UI with the new navigation patterns.
Add server private key generation from the dropdown, prevent deleting
private keys that are still in use, and close cloud provider link modals
after successful linking.
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.
Andras Bacsai