Skip to content

feat: make drawer content take up full height #3623

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: make drawer content take up full height #3623

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions src/drawer/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
.drawer {
@include styles.styles-reset;
word-wrap: break-word;
height: 100%;
display: flex;
Copy link
Member

Choose a reason for hiding this comment

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

What is the purpose of this additional flex styles? I tried to apply height: 100% without them on my local machine - works fine

Copy link
Author

Choose a reason for hiding this comment

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

We not only need the drawer to be full height. We also need the drawer content to take up the rest of the space left after the drawer header. So display flex allows use to add flex-grow: 1 to the content which will make the drawer content take up the rest of the space.
Screenshot 2025-06-30 at 3 50 39 PM

Now after adding the the flex styles the content is rendering properly.
Screenshot 2025-06-30 at 3 53 54 PM

flex-direction: column;
}

.header {
Expand Down Expand Up @@ -75,4 +78,5 @@

.test-utils-drawer-content {
/* used in test-utils */
flex: 1;
Copy link
Member

Choose a reason for hiding this comment

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

The purpose of this class is to access the dom node by this selector, so no style rules should be used here

Copy link
Author

Choose a reason for hiding this comment

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

Ack. I'll move this into another class

Copy link
Member

Choose a reason for hiding this comment

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

btw, this style rule can only be applied when the parent element is also display: flex, which is not a case for the runtime drawers

Copy link
Author

Choose a reason for hiding this comment

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

I am not sure if I understand? I do have display flex added to the parent which is the drawer component itself

Copy link
Member

Choose a reason for hiding this comment

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

got it. then this behavior is specific for your use-case, not for this general component. in this case it's better to implement it on your parent level

}
Loading