frontend: style sidebar to be responsive

Sidebar does not need to grow, as it works well if the font size
is renderd at 200%. Changing back to px.

Author: thisconnect

frontends/web/src/components/sidebar/sidebar.module.css

@@ -113,9 +113,8 @@
     cursor: default;
     display: flex;
     flex-direction: row;
-    height: var(--sidebar-item-height);
+    min-height: var(--sidebar-item-height);
     justify-content: center;
-    overflow: hidden;
     position: relative;
     text-decoration: none;
 }
@@ -166,6 +165,7 @@ a.sidebarActive :global(.stacked) img:last-child,
 .single img {
     opacity: .6;
     transition: opacity 0.2s ease;
+    vertical-align: top;
 }
 
 a.sidebarActive .single img,
@@ -179,10 +179,10 @@ a.sidebarActive .single img,
     line-height: 1;
     flex: 1;
     padding-top: 0;
-    padding-right: var(--space-default);
+    padding-right: 16px;
     font-size: var(--size-default);
     font-weight: 400;
-    transition: all 0.2s ease;
+    /* transition: all 0.2s ease; /* TODO: why all, what is this even supposed to be transitioning */
     word-break: break-word;
 }
 

frontends/web/src/style/layout.css

@@ -358,6 +358,7 @@
 
 .stacked img {
     transition: opacity 0.2s ease;
+    vertical-align: top;
 }
 
 .stacked img:last-child {

frontends/web/src/style/variables.css

@@ -74,10 +74,10 @@
 
     /* sidebar */
     --sidebar-width-large: 250px;
-    --sidebar-margin: 3.2rem;
-    --sidebar-item-height: 5.2rem;
-    --sidebar-icon-margin: 1.4rem;
-    --sidebar-icon-size: 2.4rem;
+    --sidebar-margin: 32px;
+    --sidebar-item-height: 52px;
+    --sidebar-icon-margin: 14px;
+    --sidebar-icon-size: 24px;
     --sidebar-header-size: 1.2rem;
     --sidebar-header-line-height: 1.6rem;