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>
|
||
|---|---|---|
| .. | ||
| applications | ||
| emails | ||
| forms | ||
| notification | ||
| resources | ||
| security | ||
| server | ||
| services | ||
| settings | ||
| status | ||
| team | ||
| banner.blade.php | ||
| boarding-progress.blade.php | ||
| boarding-step.blade.php | ||
| callout.blade.php | ||
| chevron-down.blade.php | ||
| confirm-modal.blade.php | ||
| domain-conflict-modal.blade.php | ||
| dropdown.blade.php | ||
| environment-variable-warning.blade.php | ||
| external-link.blade.php | ||
| git-icon.blade.php | ||
| helper.blade.php | ||
| highlighted.blade.php | ||
| internal-link.blade.php | ||
| layout-simple.blade.php | ||
| layout.blade.php | ||
| limit-reached.blade.php | ||
| loading-on-button.blade.php | ||
| loading.blade.php | ||
| modal-confirmation.blade.php | ||
| modal-input.blade.php | ||
| modal.blade.php | ||
| navbar.blade.php | ||
| page-loading.blade.php | ||
| popup-small.blade.php | ||
| popup.blade.php | ||
| pricing-plans.blade.php | ||
| resource-view.blade.php | ||
| slide-over.blade.php | ||
| toast.blade.php | ||
| use-magic-bar.blade.php | ||
| version.blade.php | ||