Fixed multiple layout issues in the settings dialog:
1. Dialog structure: Changed from grid to flexbox layout
- Removed global padding from DialogContent
- Added individual padding to DialogHeader (px-6 pt-6) and DialogFooter (px-6 pb-6 pt-4)
- Added max-h-[90vh] constraint to prevent dialog from exceeding viewport
2. Content area improvements:
- Replaced max-h-[70vh] with flex-1 for better space utilization
- Set min-h-[480px] on content wrapper to maintain consistent dialog height
- Applied min-h-[400px] to all TabsContent components to prevent height jumps
3. Scrollbar optimization:
- Changed overflow-y-auto to overflow-y-scroll to force scrollbar gutter
- Eliminates horizontal shift when switching between tabs with different content heights
- Consistent with main app layout approach (App.tsx)
4. Footer enhancement:
- Added border-t and bg-muted/20 for visual separation
- Fixed footer overlapping content in advanced tab
Result: Settings dialog now displays all content properly without requiring
fullscreen, maintains consistent height across tabs, and eliminates layout shift
when switching tabs.
c04f636bbe