Not all UI elements are following rems scaling

Created on 11 May 2024, about 2 months ago
Updated 20 June 2024, 7 days ago

Problem/Motivation

User themes can have something like font-size: 1vw; (just for instance) set on html tag, to have proportional scaling of all UI elements no matter which resolution of the screen.

Almost all sizes of everything related to Navigation module are based on --admin-toolbar-rem CSS variable, which is doing its job great. However we still have few UI elements with the px sizes set, or some where don't have sizes set at all (for instance logotype)

Steps to reproduce

1. Standard profile installation
2. Enable Navigation module
3. Then on any page try to zoom out or zoom in
4. Then add for instance font-size: 1vw; to the html tag and try to zoom out or zoom it again

I found 3 UI elements (could be more, but seems only 3, at least i didn't find anything else) where we have to set or replace sizes in rems:
1. Logotype
2. Dividing line between sections in navigation bar
3. Outlines/borders, hovers and focuses (to be checked for all interactive elements which does have these states with outlines)

Proposed resolution

1. Convert existing hardcoded px values into rems (using --admin-toolbar-rem css variable)
2. For the elements like logotype - add sizes

๐Ÿ› Bug report
Status

RTBC

Version

11.0 ๐Ÿ”ฅ

Component
Navigationย  โ†’

Last updated less than a minute ago

No maintainer
Created by

๐Ÿ‡ท๐Ÿ‡บRussia kostyashupenko Omsk

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.69.0 2024