Skip to content

Commit 1dd405f

Browse files
authored
fix(Drawer): ensure content on very small screen sizes doesn't get cut off (#4567)
More [info](https://dnb-it.slack.com/archives/CMXABCHEY/p1739367410251329).
1 parent ae46e71 commit 1dd405f

9 files changed

+9
-9
lines changed

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/properties.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@ The Drawer is responsive with the following properties:
2222

2323
```css
2424
--drawer-width: 40vw;
25-
--drawer-min-width: 25rem;
25+
--drawer-min-width: 384px;
2626
--drawer-max-width: 40rem;
2727
```

packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -991,7 +991,7 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
991991
}
992992
.dnb-drawer {
993993
--drawer-width: 40vw;
994-
--drawer-min-width: 25rem;
994+
--drawer-min-width: 384px;
995995
--drawer-max-width: 40rem;
996996
--drawer-spacing: 2rem;
997997
--drawer-spacing-minus: -2rem;
@@ -1013,9 +1013,9 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
10131013
}
10141014
@media screen and (max-width: 40em) {
10151015
.dnb-drawer {
1016-
width: 100vw;
1017-
min-width: none;
1018-
max-width: none;
1016+
--drawer-width: 100vw;
1017+
--drawer-min-width: none;
1018+
--drawer-max-width: none;
10191019
}
10201020
}
10211021
@media screen and (max-width: 40em) {

packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
.dnb-drawer {
2626
--drawer-width: 40vw;
27-
--drawer-min-width: 25rem;
27+
--drawer-min-width: 384px; // (24rem) Use px so a larger font-size will not make the drawer too small
2828
--drawer-max-width: 40rem;
2929
--drawer-spacing: 2rem; // should reflect --spacing-large
3030
--drawer-spacing-minus: -2rem; // should reflect --spacing-large
@@ -38,9 +38,9 @@
3838
max-width: var(--drawer-max-width);
3939

4040
@include allBelow(small) {
41-
width: 100vw;
42-
min-width: none;
43-
max-width: none;
41+
--drawer-width: 100vw;
42+
--drawer-min-width: none;
43+
--drawer-max-width: none;
4444
}
4545

4646
@include defaultDropShadow();

0 commit comments

Comments
 (0)