better styling for tiny screens

inovex · Feb 27, 2024 · 3d7e493 · 3d7e493
1 parent e4da17d
commit 3d7e493
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/src/components/BoardReactionMenu/BoardReactionMenu.scss b/src/components/BoardReactionMenu/BoardReactionMenu.scss
@@ -104,26 +104,23 @@ $reaction-size: 64px;
 
 @media #{$smartphone} {
   .board-reactions__container {
-    bottom: $column__border-width + $spacing--lg + 62px;
+    bottom: $column__border-width + $spacing--lg + 72px;
   }
 
   .board-reactions__close {
     display: none;
   }
 }
 
-@media screen and (max-width: 400px) {
+@media #{$mini-smartphone} {
   .board-reactions__container {
+    bottom: $column__border-width + $spacing--lg + 48px;
     padding: 0 $spacing--xs;
     gap: 2px;
   }
 }
 
 @media screen and (max-width: 350px) {
-  .board-reactions__container {
-    bottom: $column__border-width + $spacing--base + 52px;
-  }
-
   .board-reactions__reaction {
     width: 48px;
   }

diff --git a/src/components/MenuBars/MenuBars.scss b/src/components/MenuBars/MenuBars.scss
@@ -140,26 +140,27 @@ $menu-mobile__width: 72px;
 }
 
 @media #{$smartphone} {
+  $menu-mobile__width: 64px;
+
   .menu-bars {
     display: none;
   }
+
   .menu-bars-mobile {
     display: grid;
     grid-template-columns: 0 $menu-mobile__width;
     grid-template-rows: 0 $menu-mobile__width;
     bottom: $spacing--lg;
     right: $spacing--lg;
   }
-}
 
-@media #{$mini-smartphone} {
-  .menu-bars-mobile {
-    bottom: $spacing--base;
-    right: $spacing--base;
+  .menu-bars-mobile__fab {
+    height: $menu-mobile__width;
+    width: $menu-mobile__width;
   }
 }
 
-@media screen and (max-width: 350px) {
+@media #{$mini-smartphone} {
   .menu-bars-mobile {
     bottom: 1vw;
     right: 1vw;

diff --git a/src/components/TooltipButton/TooltipButton.scss b/src/components/TooltipButton/TooltipButton.scss
@@ -224,6 +224,7 @@ $tooltip-button-size: 46px;
 
       .tooltip-button__icon {
         color: $color-white;
+        background: none;
       }
     }
   }
@@ -243,6 +244,24 @@ $tooltip-button-size: 46px;
   }
 }
 
+@media screen and (max-width: 350px) {
+  $tooltip-button-size--mobile: 52px;
+  $tooltip-buttons-gap--mobile: 8px;
+
+  .tooltip-button {
+    $clickable-area-size: calc($tooltip-button-size--mobile + $tooltip-buttons-gap--mobile);
+    height: $clickable-area-size;
+    width: $clickable-area-size;
+  }
+
+  .tooltip-button__icon {
+    height: $tooltip-button-size--mobile;
+    width: $tooltip-button-size--mobile;
+    top: $spacing--xxs;
+    left: $spacing--xxs;
+  }
+}
+
 [theme="dark"] {
   .tooltip-button {
     &:focus-visible,