From 15ea879899db86b9e9df6ba8823fdb599ea6add4 Mon Sep 17 00:00:00 2001 From: Shubham Padia Date: Tue, 16 Jul 2024 03:18:34 +0000 Subject: [PATCH] css: Scale font-size for .small buttons. Fixes #30895. The root font-size for the app has always been 16px, and it remains the same when switching between 14px and 16px mode. This leads to `.small` buttons looking relatively smaller to their surroundings in 16px mode. So, if we use a unit that changes when switching between modes, we will have to multiple that value by (16/14) so that we don't change the existing behaviour for the 14px mode and make things smaller. This commit only affects `.small` buttons, the same named class is used in other places but does not use rem unit there and therefore does not require any changes. The original plan was to use em instead of rem and multiply it by (16/14 * 0.8), but since em depends on the parent element, there was a case in the poll button widget where 1em was equal to 16px in the dense 14px mode. While, the right thing to do might have been some refactor to make it work as desired, the safest thing to do right now might be to use the --base-font-size-px variable directly for the 9.0 release. --- web/styles/app_components.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/web/styles/app_components.css b/web/styles/app_components.css index 9f664cd665..d4fc85f3f5 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -149,7 +149,18 @@ input::placeholder { } &.small { - font-size: 0.8rem; + /* This value was 0.8rem in the past. When using rem, + the root font size was 16px when the base font-size was + 14px. Now, we have two modes, one with 14px base + font-size and one with 16px base font-size. We multiply + by (16 / 14 * 0.8 = 0.9143) so rem equivalent value + will remain the same in the legacy 14px mode, while + scaling the size up for 16px mode. The font-size will + resolve in pixels. + TODO: Refactor this part to either use `em` or `rem` + and not this temporary hack of using calc() and + variables. */ + font-size: calc(0.9143 * var(--base-font-size-px)); min-width: inherit; padding: 6px 10px; }