frontend: improve sidebar in responsive mode

Sidebar can appear on Android tablets, fixed some styles related to
the sidebar component.

Also removed anmiation all (transition) on sidebar labels. Kept
only icons should animate opacity.

Author: thisconnect

frontends/web/src/components/keystore/connected-keystore.tsx

@@ -53,7 +53,12 @@ export const ConnectedKeystore = ({
         <>
           {' '}
           <Badge
-            icon={props => <USBSuccess style={{ width: '0.9rem', height: '0.9rem' }} {...props} />}
+            icon={props => (
+              <USBSuccess style={{
+                width: 'min(0.9rem, 12px)',
+                height: 'min(0.9rem, 12px)',
+              }} {...props} />
+            )}
             title={t('device.keystoreConnected')}
             type="success">
             {connectedIconOnly ? undefined : t('device.keystoreConnected')}

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

@@ -112,15 +112,15 @@
 
 .sidebarItem > a,
 .sidebarItem > button {
-    background-color: transparent;
     align-items: center;
+    background-color: transparent;
     border-radius: 2px;
     color: white;
     cursor: default;
     display: flex;
     flex-direction: row;
-    height: var(--sidebar-item-height);
     justify-content: center;
+    min-height: var(--sidebar-item-height);
     overflow: hidden;
     position: relative;
     text-decoration: none;
@@ -185,10 +185,9 @@ a.sidebarActive .single img,
     line-height: 1;
     flex: 1;
     padding-top: 0;
-    padding-right: var(--space-default);
+    padding-right: var(--space-half);
     font-size: var(--size-default);
     font-weight: 400;
-    transition: all 0.2s ease;
     word-break: break-word;
 }
 

frontends/web/src/style/layout.css

@@ -348,14 +348,15 @@ button, textarea {
 }
 
 .stacked img {
+    display: block;
     transition: opacity 0.2s ease;
 }
 
 .stacked img:last-child {
+    left: 50%;
     opacity: 0;
     position: absolute;
     top: 0;
-    left: 50%;
     transform: translateX(-50%);
 }