From 112cd9a085004d3ec1fb69f8780dddb6efea7114 Mon Sep 17 00:00:00 2001 From: Nicholas Ray Date: Fri, 13 Jan 2023 12:08:51 -0700 Subject: [PATCH] Convert @width-column-start-desktop and @width-column-start-desktop-wide to relative units The search box was overlapping the logo when increasing the browser's default font size as a result of the logo's width using relative units and the column using pixels [1]. This converts the column to use relative units so that it can scale with the logo's width and not overlap. [1] https://phabricator.wikimedia.org/F36201423 Bug: T326863 Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399 --- resources/common/variables.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/common/variables.less b/resources/common/variables.less index a35bc86eb..0fc19226e 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -210,5 +210,5 @@ // Grid @grid-row-gap: 24px; @grid-column-gap: 36px; -@width-column-start-desktop: 196px; // Total width including gap is 232px -@width-column-start-desktop-wide: 248px; // Total width including gap is 284px +@width-column-start-desktop: unit( 196px / @font-size-browser, em ); // Total width including gap is 232px +@width-column-start-desktop-wide: unit( 248px / @font-size-browser, em ); // Total width including gap is 284px