Fix: Drawer Layout Issue

[francistse23]

Closes

Problem

There is a bug with DrawerLayout from the recent changes. Specifically, when user would collapse the bottom and/or right drawers, the drawer would collapse, but not "removed" from the view. It just transforms to their "hidden" position, but visually it is still present and breaks the intended layout. (Sorry, poor explanation. Best to check out the recording I have below to get a sense of what I meant)

The bug was likely introduced from a recent change for the drawer's animation.

Solution

We have updated the CSS so that it accounts for both opacity and visibility animations. We are defaulting the .panel visibility to hidden. Additionally, the visibility of the drawers are now animated to share the same duration as the delay set on opacity and transform, visually creating the drawer opening/closing animation.

✅ Pull Request Checklist

• Included link to corresponding GitHub Issue.
• The commit message follows conventional commit extended guidelines.
• Added/updated unit tests and storybook for this change (for bug fixes / features).
• Added/updated visual regression tests for this change (for bug fixes / features).
• Added/updated documentation (for bug fixes / features)
• Filled out test instructions.
• Added changeset (for bug fixes / features).

📝 Test Instructions

1. Review current deployed storybook by navigating to DrawerLayout
2. You should see the bottom and right drawers, upon collapse, bleeds out of the viewport and takes up some space on the screen. This is a bug where the drawer is supposed to be "hidden" on collapse, with no additional spaces in the viewport allocated for the drawer
3. Pull this branch and run storybook
4. Navigate to DrawerLayout
5. Open/close the drawers. It should now work as expected with NO layout shifts and animations are visually matching the behavior

❓ Does this PR introduce a breaking change?

• Yes
• No

🤖 AI Usage

• Added corresponding label (ai / human) to PR:

If ai was used, select all that apply:

• Ideation / brainstorming
• Documentation
• Testing
• Implementation

Before:

Screen.Recording.2026-05-20.at.09.27.31.mov

After:

Screen.Recording.2026-05-20.at.13.46.16.mov

💬 Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
design-toolkit	Ready	Preview, Comment	May 21, 2026 9:51pm
map-toolkit	Ready	Preview, Comment	May 21, 2026 9:51pm

[github-actions]

🧠 Memory Leak Test Results

Status: ✅ All tests passed

Component	Leaks	Retained Size	Status
accordion-group	0	0 B	✅
accordion	0	0 B	✅
actionbar	0	0 B	✅
avatar	5	110.72 KB	✅
badge	0	0 B	✅
button	0	0 B	✅
dialog	0	0 B	✅
drawer	0	0 B	✅
floating-card	0	0 B	✅
floatingcard	0	0 B	✅
intentional-leak	0	0 B	✅
notice	0	0 B	✅
tooltip	2	44.27 KB	✅

📋 Test Details

• Components tested: 13
• Total leaks detected: 7
• Workflow run: View details

---

_{🤖 Generated by MemLab + Playwright}

[github-actions]

📊 Coverage Reports

Coverage Changes by Package

Click to expand 29 package details

apps/next (No diff)

packages/bus (No diff)

packages/constants (No diff)

packages/converters (No diff)

packages/core (No diff)

packages/dataset (No diff)

packages/design-foundation (No diff)

packages/design-toolkit

metric	current	base	change
lines	86.42%	86.42%	0.00
statements	86.42%	86.46%	-0.04
functions	83.26%	83.36%	-0.10
branches	78.81%	78.81%	0.00

packages/formatters (No diff)

packages/geo (No diff)

packages/hotkey-manager (No diff)

packages/icons (No diff)

packages/logger (No diff)

packages/map-toolkit (No diff)

packages/math (No diff)

packages/ntds (No diff)

packages/postcss-tailwind-css-modules (No diff)

packages/predicates (No diff)

packages/temporal (No diff)

packages/web-worker (No diff)

packages/websocket (No diff)

tooling/biome-config (No diff)

tooling/constellation-tracker (No diff)

tooling/eslint-config (No diff)

tooling/prettier-config (No diff)

tooling/smeegl (No diff)

tooling/turbo-filter (No diff)

tooling/typescript-config (No diff)

tooling/vitest-config (No diff)

_{Coverage data collected from all packages in the monorepo.}

[github-actions]

🖼️ Visual Regression Test Results

Status: ✅ All tests passed

Metric	Count
✅ Passed	2726
❌ Failed	0
Total	2726

Component Coverage

45 / 54 design-toolkit components have VRT tests (83%)

Missing VRT tests (9 components)

- audio - carousel - deferred-collection - floating-card - gantt - lines - media-controls - status-indicator - video

> 4 components excluded: hotkey, icon, skeleton, view-stack --- _{🤖 Generated by Vitest Browser + Playwright}

[switzerb]

Looks great! Just to document our conversation for posterity, this is the second half of the bug:

when the right side drawer is collapsed (or the left), the blue bottom drawer should expand to the edge of the view screen.