Skip to content

fix(drawer): allow custom width/height and resolve nested dropdown positioning #6299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
michaelmkraus wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(drawer): allow custom width/height and resolve nested dropdown positioning #6299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
70c9c32
fix(drawer): change min-width and min-height fallbacks to auto
michaelmkraus Mar 12, 2026
00697c8
fix(drawer): remove transform containing block on open state
michaelmkraus Mar 12, 2026
b2f05b4
chore(drawer): add changeset for drawer sizing and select dropdown bu…
michaelmkraus Mar 12, 2026
3c3ffa2
refactor(drawer): removed comment
michaelmkraus Mar 12, 2026
6e8ae67
Merge branch 'main' into fix-drawer-customselect-dropdown-position
michaelmkraus Mar 12, 2026
f787cb7
Apply suggestion from @mfranzke
michaelmkraus Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slow-sheep-take.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@db-ux/core-components": patch
---

fix: the drawer ignored custom `max-width` and `max-height` properties due to internal `min-width` overrides. Additionally, resolved a bug where nested fixed-position elements (like DBCustomSelect dropdowns) were incorrectly positioned while the drawer was open.
8 changes: 4 additions & 4 deletions packages/components/src/components/drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
/* stylelint-disable-next-line db-ux/use-sizing */
min-block-size: var(
--db-drawer-min-height,
calc(100% - #{variables.$db-spacing-fixed-xl})
auto
Copy link
Copy Markdown
Collaborator

@mfranzke mfranzke Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the default value of min-block-size is 0 – why do we need to set it to auto instead? Are we overwriting some other declaration? Or could we remove that fallback declaration?

Copy link
Copy Markdown
Contributor Author

@michaelmkraus michaelmkraus Mar 16, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we remove the declaration entirely, the users can't set their own minimums via --db-drawer-min-height / -width.
If we set the fallback to 0, the drawer could collapse to 0 px and hide the content. By explicitly using auto as fallback, we force the browser to respect the content size (min-content) when no specific CSS variable is provided.
So using auto is in my view the correct way to make the component more robust in flexible layouts.

);
max-inline-size: none;
}
Expand Down Expand Up @@ -173,7 +173,7 @@ $spacings: (
/* stylelint-disable-next-line db-ux/use-sizing */
min-inline-size: var(
--db-drawer-min-width,
calc(100% - #{variables.$db-spacing-fixed-xl})
auto
);

&:not([data-direction]),
Expand Down Expand Up @@ -287,12 +287,12 @@ $spacings: (
&:not([data-direction]),
&[data-direction="right"],
&[data-direction="left"] {
transform: translateX(0%);
transform: none;
}

&[data-direction="up"],
&[data-direction="down"] {
transform: translateY(0%);
transform: none;
}
}

Expand Down
Loading