Skip to content

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

Open
michaelmkraus wants to merge 6 commits intomainfrom
fix-drawer-customselect-dropdown-position
Open

fix(drawer): allow custom width/height and resolve nested dropdown positioning#6299
michaelmkraus wants to merge 6 commits intomainfrom
fix-drawer-customselect-dropdown-position

Conversation

@michaelmkraus
Copy link
Copy Markdown
Contributor

@michaelmkraus michaelmkraus commented Mar 12, 2026

Proposed changes

Allow custom width/height and resolve nested dropdown positioning

resolves #4660

Types of changes

  • Bugfix (non-breaking change that fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (improvements to existing components or architectural decisions)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices apply)

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-drawer-customselect-dropdown-position

@michaelmkraus michaelmkraus self-assigned this Mar 12, 2026
@michaelmkraus michaelmkraus added 🐛bug Something isn't working 🧱components Changes inside components folder labels Mar 12, 2026
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 12, 2026

🦋 Changeset detected

Latest commit: f787cb7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages
Name Type
@db-ux/core-components Patch
@db-ux/ngx-core-components Patch
@db-ux/react-core-components Patch
@db-ux/wc-core-components Patch
@db-ux/v-core-components Patch
@db-ux/core-foundations Patch
@db-ux/core-stylelint Patch
@db-ux/core-migration Patch
@db-ux/agent-cli Patch
@db-ux/core-eslint-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the 📕documentation Improvements or additions to documentation label Mar 12, 2026
@michaelmkraus michaelmkraus moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Mar 12, 2026
nmerget
nmerget previously approved these changes Mar 16, 2026
@github-project-automation github-project-automation bot moved this from 🎁 Ready for review to ⏰ready for release in UX Engineering Team Backlog Mar 16, 2026
min-block-size: var(
--db-drawer-min-height,
calc(100% - #{variables.$db-spacing-fixed-xl})
auto
Copy link
Copy Markdown
Collaborator

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

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.

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
@mfranzke mfranzke moved this from ⏰ready for release to 🎶 Waiting for feedback in UX Engineering Team Backlog Mar 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛bug Something isn't working 🧱components Changes inside components folder 🏘components 📕documentation Improvements or additions to documentation

Projects

Status: 🎶 Waiting for feedback

Development

Successfully merging this pull request may close these issues.

DBDrawer and DBCustomSelect: custom width of Drawer breaks DBCustomSelect`s Dropdowns position

3 participants