feat(kit): Drawer support safe-area top/bottom (#11296)

mdlufy · taiga-family-bot · web-flow · commit b796cb70e166 · 2025-07-29T11:41:38.000+03:00
Co-authored-by: taiga-family-bot &lt;taiga-family-bot@users.noreply.github.com&gt;
diff --git a/projects/demo/src/modules/components/drawer/examples/1/index.ts b/projects/demo/src/modules/components/drawer/examples/1/index.ts
@@ -2,7 +2,7 @@ import {Component, signal} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiRepeatTimes} from '@taiga-ui/cdk';
-import {TuiButton, TuiLink, TuiPopup, TuiScrollbar, TuiTitle} from '@taiga-ui/core';
+import {TuiButton, TuiLink, TuiPopup, TuiTitle} from '@taiga-ui/core';
 import {TuiBadge, TuiDrawer, TuiTabs} from '@taiga-ui/kit';
 import {TuiHeader, TuiNavigation} from '@taiga-ui/layout';
 
@@ -17,7 +17,6 @@ import {TuiHeader, TuiNavigation} from '@taiga-ui/layout';
         TuiNavigation,
         TuiPopup,
         TuiRepeatTimes,
-        TuiScrollbar,
         TuiTabs,
         TuiTitle,
     ],
diff --git a/projects/kit/components/drawer/drawer.style.less b/projects/kit/components/drawer/drawer.style.less
@@ -2,7 +2,7 @@
 
 :host {
     position: fixed;
-    top: 3rem;
+    top: ~'max(3rem, env(safe-area-inset-top))';
     bottom: 0;
     inline-size: 36.25rem;
     max-inline-size: calc(100vw - 3rem);
@@ -16,21 +16,27 @@
         animation-name: tuiFade, tuiSlide;
     }
 
-    &._overlay::before {
-        .transition(opacity);
-
-        content: '';
-        position: fixed;
-        top: -100vh;
-        left: -100vw;
-        right: -100vw;
-        bottom: -100vh;
-        background: var(--tui-service-backdrop);
-        transition-timing-function: ease-out;
-
-        tui-root:has(tui-dialogs .t-overlay_visible) & {
-            opacity: 0;
-            transition-timing-function: ease-in;
+    &._overlay {
+        > .t-aside {
+            padding-block-start: env(safe-area-inset-top);
+        }
+
+        &::before {
+            .transition(opacity);
+
+            content: '';
+            position: fixed;
+            top: -100vh;
+            left: -100vw;
+            right: -100vw;
+            bottom: -100vh;
+            background: var(--tui-service-backdrop);
+            transition-timing-function: ease-out;
+
+            tui-root:has(tui-dialogs .t-overlay_visible) & {
+                opacity: 0;
+                transition-timing-function: ease-in;
+            }
         }
     }
 }
@@ -43,6 +49,8 @@
     border-radius: inherit;
     overflow: hidden;
     background: inherit;
+    box-sizing: border-box;
+    padding-block-end: env(safe-area-inset-bottom);
 }
 
 .t-scrollbar {
