UX: tweak min-height of elements in toast to align close icon better (#34416)

chapoi · web-flow · commit d942e260dab8 · 2025-08-19T15:16:09.000+02:00
Fixing: <img width="441" height="180" alt="CleanShot 2025-08-19 at 14 11 22" src="https://github.com/user-attachments/assets/366b1b47-4862-4605-910b-72e9861f28e5" /> The used `height` param was A) too low, and B) set in px so not responsive for different font-size use. By replacing it with a slightly smarter calculation, the one-line toasty should be improved.
diff --git a/app/assets/stylesheets/common/float-kit/d-default-toast.scss b/app/assets/stylesheets/common/float-kit/d-default-toast.scss
@@ -5,14 +5,14 @@
 
   &__close-container {
     width: calc(40px - 0.5rem);
-    height: 30px;
+    height: calc(1em + (2 * 0.65em));
   }
 
   &__icon-container {
     flex: 1 0 auto;
     display: flex;
     width: calc(40px - 0.5rem);
-    height: 30px;
+    height: calc(1em + (2 * 0.65em));
     align-items: center;
     justify-content: center;
 
@@ -71,7 +71,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    min-height: 30px;
+    min-height: calc(1em + (2 * 0.65em));
   }
 
   &__progress-bar {
@@ -89,7 +89,7 @@
   }
 
   &__texts {
-    min-height: 30px;
+    min-height: inherit;
     display: flex;
     justify-content: center;
     flex-direction: column;
