refactor: restructure BaseModalLayout from flexbox to CSS Grid#8211
Merged
refactor: restructure BaseModalLayout from flexbox to CSS Grid#8211
Conversation
Contributor
📝 WalkthroughWalkthroughReplaced test header locator and adjusted mobile viewport assertion; reworked BaseModalLayout to a responsive three-column CSS grid with keyboard Escape handling and new right-panel controls; added five English i18n keys for dialog and panel actions. Changes
Sequence Diagram(s)(omitted — changes are component/internal and do not introduce a multi-actor sequential flow requiring visualization) Possibly related PRs
Suggested reviewers
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Tests:
|
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/21/2026, 08:56:24 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
DrJKL
force-pushed
the
drjkl/basemodal-grid-layout
branch
from
7d142b8 to
b7f308a
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.3 kB (baseline 22.3 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.02 MB (baseline 1.02 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 430 kB (baseline 430 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 8 added / 8 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.8 kB (baseline 2.8 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 32.8 kB (baseline 32.8 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 3.05 MB (baseline 3.05 MB) • 🔴 +2.28 kBStores, services, APIs, and repositories
Status: 7 added / 7 removed Utilities & Hooks — 18.1 kB (baseline 18.1 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 4 added / 4 removed Vendor & Third-Party — 10.4 MB (baseline 10.4 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 6.28 MB (baseline 6.28 MB) • ⚪ 0 BBundles that do not match a named category
Status: 22 added / 22 removed |
dosubot
bot
added
the
size:L
Contributor
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
browser_tests/tests/templates.spec.ts (1)
182-210: Add a@mobiletag to this responsive test. This case explicitly validates mobile behavior, so tagging keeps mobile-focused runs filterable.♻️ Suggested tweak
- test('template cards are dynamically sized and responsive', async ({ + test('template cards are dynamically sized and responsive `@mobile`', async ({Based on learnings, mobile-specific Playwright tests should be tagged.
🤖 Fix all issues with AI agents
In `@src/components/widget/layout/BaseModalLayout.vue`:
- Around line 10-14: The left/right panel wrappers in BaseModalLayout.vue (the
divs that render <slot name="leftPanel" /> and <slot name="rightPanel" />)
remain in the DOM when collapsed and must be hidden from keyboard and AT; add
boolean bindings for inert and aria-hidden to those wrapper elements (e.g.,
:inert="leftCollapsed" and :aria-hidden="leftCollapsed" for the left panel and
equivalent for the right) using the component's existing collapse state (or a
computed that checks width === 0) so they are inert/aria-hidden while collapsed;
apply the same change to the other panel wrapper occurrences mentioned (around
the other ranges 80-116 and 168-172).
- Around line 17-62: The header controls (close and right-panel toggle) are
currently inside a v-if="$slots.header" so dialogs using contentTitle only lack
those controls; move or duplicate the control buttons out of the v-if so they
render even when no header slot is provided, and guard the left-panel toggle
with hasLeftPanel (use hasRightPanel for the right toggle and isRightPanelOpen
to pick which icon) while still keeping existing bindings to toggleLeftPanel,
toggleRightPanel, closeDialog, showLeftPanel, notMobile and contentTitle in
BaseModalLayout.vue so consumers get a clickable close button and no
non-functional left-toggle.
Amp-Thread-ID: https://ampcode.com/threads/T-019bdeea-bd51-7270-9e3f-0e657fa69df6 Co-authored-by: Amp <amp@ampcode.com>
DrJKL
force-pushed
the
drjkl/basemodal-grid-layout
branch
from
8d18d97 to
29be657
Compare
Amp-Thread-ID: https://ampcode.com/threads/T-019be227-64ff-7125-812f-a303cd23576d Co-authored-by: Amp <amp@ampcode.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/widget/layout/BaseModalLayout.vue (1)
212-225: Consider migrating scoped styles to Tailwind classes.Per coding guidelines, Tailwind 4 is preferred over
<style>blocks. These styles could be expressed as Tailwind classes on the root element:♻️ Suggested refactor
<div - class="base-widget-layout rounded-2xl overflow-hidden relative" + class="h-[80vh] w-[90vw] max-w-[1280px] aspect-[20/13] 2xl:max-w-[1724px] rounded-2xl overflow-hidden relative" `@keydown.esc.capture`="handleEscape" >Then remove the
<style scoped>block entirely.
♻️ Duplicate comments (1)
src/components/widget/layout/BaseModalLayout.vue (1)
26-43: Guard left panel toggle withhasLeftPanelcheck.The left panel toggle button renders on mobile regardless of whether a
leftPanelslot is provided. While current consumers all provide this slot, adding a guard makes the component more robust.♻️ Suggested fix
<Button - v-if="!notMobile" + v-if="hasLeftPanel && !notMobile" size="icon" :aria-label="
Contributor
Author
I'll take it! 😁 |
DrJKL
added
the
needs-backport
|
1 similar comment
|
DrJKL
added
needs-backport
|
DrJKL
added a commit
that referenced
this pull request
Jan 22, 2026
Refactors `BaseModalLayout` from a flexbox-based layout to CSS Grid, enabling smoother panel transitions and improved layout control. - **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) - **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 - **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>
DrJKL
added a commit
that referenced
this pull request
Jan 22, 2026
…box to CSS Grid (#8239) Backport of #8211 to `cloud/1.37`. Cherry-picked merge commit `2db246f494b42bb65bd034571c2388b8d6c7e11f`. **Resolved conflicts:** - `src/components/widget/layout/BaseModalLayout.vue` - Accepted PR version (complete refactor from flexbox to CSS Grid) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8239-backport-cloud-1-37-refactor-restructure-BaseModalLayout-from-flexbox-to-CSS-Grid-2f06d73d365081b3bf60f558ceced8c5) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
godwiniheuwa
pushed a commit
to godwiniheuwa/ComfyUI_frontend
that referenced
this pull request
Jan 22, 2026
…-Org#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>
This was referenced Jan 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refactors
BaseModalLayoutfrom a flexbox-based layout to CSS Grid, enabling smoother panel transitions and improved layout control.Changes
Layout Restructure
nav | main | aside)grid-template-columnsinstead of Vue<Transition>withtranslateX.slide-panel-*and.fade-*transition styles (no longer needed with grid approach)Right Panel Improvements
rightPanelHeaderTitle,rightPanelHeaderActions)rightPanelTitleprop for simple text title in right panel headerUX & Accessibility
aria-labelattributes to all panel toggle and close buttonsshowLeftPanel,hideLeftPanel,showRightPanel,hideRightPanel,closeDialog