fixup! fixup! fixup! Feat(web): Introduce the Toast component #DS-1112

packages/web/src/scss/components/Toast/_Toast.scss

@@ -1,5 +1,12 @@
 // 1. Spread the `Toast` container over the viewport.
 //
+//    a) For top-to-bottom languages, the `inset-inline` of `0` is a safe way to spread the container horizontally.
+//    b) For the best scrolling experience on mobile devices with dynamic viewports, only one of the `inset-block`
+//       values can be set to `0` at a time. Having both set to `0` would lead to sluggish scrolling on mobile devices.
+//    c) The `height` property is set to `100lvh` to spread the container over the entire viewport so the toast messages
+//       (and their shadows) are not clipped, even during dynamic viewport changes (again, using the `dvh` unit would
+//       lead to sluggish scrolling on mobile devices).
+//
 // 2. Use grid layout to control horizontal (x) and vertical (y) alignment of the messages.
 //
 //    a) Horizontal alignment is controlled by the `justify-content` property of the grid container. This is further
@@ -27,6 +34,9 @@
 //    (The alternative would be to scroll the toast queue itself, but this would go against (4) by blocking user's
 //    interaction with the underlying content.)
 //
+//    ⚠️ CAUTION: As a result of this construction, vertical scrolling of the toast queue only works with pointers, not
+//    with touch events.
+//
 // 4. Because the `Toast` container is present on the page all the time, we must allow interaction with the page content
 //    beneath it. The same applies to the toast queue element (7).
 //
@@ -69,9 +79,11 @@
     --toast-padding-y: #{theme.$padding-y};
 
     position: fixed; // 1.
-    inset: 0; // 1.
+    inset-inline: 0; // 1.a
+    inset-block: var(--toast-inset-top, 0) var(--toast-inset-bottom, 0); // 1.b
     display: grid; // 2.
     justify-content: var(--toast-alignment-x); // 2.a
+    height: 100lvh; // 1.c
 
     // 5.
     padding: max(var(--toast-padding-y), env(safe-area-inset-top, 0))
@@ -114,6 +126,8 @@
         @each $alignment-name, $alignment-value in theme.$alignments-y {
             .Toast--#{$infix}#{$alignment-name} {
                 --toast-alignment-y: #{$alignment-value};
+                --toast-inset-top: #{if($alignment-name == 'top', 0, 'auto')};
+                --toast-inset-bottom: #{if($alignment-name == 'bottom', 0, 'auto')};
                 --toast-queue-direction: #{if($alignment-name == 'bottom', 'column-reverse', 'column')};
             }
         }