From 49332fb528fa5858638eef40e2f2363accacf2be Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Wed, 2 Jul 2025 06:11:48 +0530 Subject: [PATCH] modals: Use relative em units for padding to scale UI with font size. 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. --- web/styles/modal.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/web/styles/modal.css b/web/styles/modal.css index 48d61a3276..60396bcff8 100644 --- a/web/styles/modal.css +++ b/web/styles/modal.css @@ -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);