Alexander Brown 2db246f494 refactor: restructure BaseModalLayout from flexbox to CSS Grid (#8211) ...

## Summary

Refactors `BaseModalLayout` from a flexbox-based layout to CSS Grid,
enabling smoother panel transitions and improved layout control.

## Changes

### Layout Restructure

- **Flexbox → CSS Grid**: Replaced nested flexbox with a 3-column CSS
Grid (`nav | main | aside`)
- **Smooth panel transitions**: Panel show/hide now animates via
`grid-template-columns` instead of Vue `<Transition>` with `translateX`
- **Removed transition CSS**: Deleted `.slide-panel-*` and `.fade-*`
transition styles (no longer needed with grid approach)

### Right Panel Improvements

- **Dedicated header**: Added header with close button, right panel
toggle, and customizable title slot (`rightPanelHeaderTitle`,
`rightPanelHeaderActions`)
- **New prop**: Added `rightPanelTitle` prop for simple text title in
right panel header

### UX & Accessibility

- **ESC key handling**: Pressing Escape closes the right panel (if open)
before closing the dialog
- **Accessibility**: Added `aria-label` attributes to all panel toggle
and close buttons
- **i18n**: Added translation keys: `showLeftPanel`, `hideLeftPanel`,
`showRightPanel`, `hideRightPanel`, `closeDialog`

---------

Co-authored-by: Amp <amp@ampcode.com>

2026-01-21 13:20:39 -08:00

..

layout

refactor: restructure BaseModalLayout from flexbox to CSS Grid (#8211)

2026-01-21 13:20:39 -08:00

nav

feat: add badge support to NavItem component (#8207)

2026-01-21 11:48:22 -08:00

panel

feat: add badge support to NavItem component (#8207)

2026-01-21 11:48:22 -08:00

SampleModelSelector.vue

Component: Button Migration 3: IconTextButton (#7603)

2025-12-18 16:09:56 -08:00