paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

modals: Use relative em units for padding to scale UI with font size.

Browse Source 
This commit modifies the modal styles to use relative `em` units for
padding instead of fixed pixel values, allowing the modal to scale
better with different font sizes.
This commit is contained in:
Sayam Samal
2025-07-02 06:11:48 +05:30
committed by Tim Abbott
parent 22c913cc9e
commit 49332fb528
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/modal.css
View File

@@ -30,7 +30,8 @@
}
.modal__header {
padding: 16px 16px 16px 24px;
/* 16px 16px 16px 24px at 16px/1em */
padding: 1em 1em 1em 1.5em;
display: grid;
/* 1.8em is the shortest round value for heading at which none of
the letters of the english alphabet get cut by overflow:hidden
@@ -46,7 +47,8 @@
display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px 24px;
/* 20px 24px at 16px/1em */
padding: 1.25em 1.5em;
}
.modal__title {
@@ -118,14 +120,15 @@
.modal__content {
display: flex;
flex-direction: column;
padding: 2px 24px;
/* 2px 24px at 16px/1em */
padding: 0.125em 1.5em;
/* Prevent the appearance of a horizontal
native scrollbar at certain
info-density/zoom levels. */
overflow: hidden auto;
/* Set a max-width, less the 24px of left and right
/* Set a max-width, less the 1.5em of left and right
padding specified above. */
max-width: calc(100% - 48px);
max-width: calc(100% - 3em);
&.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid var(--color-border-modal-footer);