From 616014d5d2dee80dc3099702c21b9b0d8331940d Mon Sep 17 00:00:00 2001
From: Vladimir Potekhin <vladimir.potekh@gmail.com>
Date: Mon, 30 Sep 2024 18:47:44 +0300
Subject: [PATCH] fix(layout): `Header` fix gap on mobile

---
 .../addon-mobile/styles/common/header.less    | 26 +++++++++++++++++++
 .../addon-mobile/styles/taiga-ui-mobile.less  |  1 +
 .../components/header/header.styles.less      | 17 +++---------
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 projects/addon-mobile/styles/common/header.less

diff --git a/projects/addon-mobile/styles/common/header.less b/projects/addon-mobile/styles/common/header.less
new file mode 100644
index 000000000000..89645264390a
--- /dev/null
+++ b/projects/addon-mobile/styles/common/header.less
@@ -0,0 +1,26 @@
+[tuiHeader] {
+    &[data-size='xxl'],
+    &[data-size='xl'],
+    &[data-size='l'] {
+        [tuiTitle] {
+            gap: 1rem;
+        }
+    }
+
+    &[data-size='m'] {
+        [tuiTitle] {
+            gap: 0.5rem;
+        }
+    }
+
+    [tuiAccessories] {
+        gap: 1rem;
+    }
+
+    &[data-size='xxs'] {
+        [tuiTitle],
+        [tuiAccessories] {
+            font: var(--tui-font-heading-6);
+        }
+    }
+}
diff --git a/projects/addon-mobile/styles/taiga-ui-mobile.less b/projects/addon-mobile/styles/taiga-ui-mobile.less
index f3314a49c024..2a3395f05cfb 100644
--- a/projects/addon-mobile/styles/taiga-ui-mobile.less
+++ b/projects/addon-mobile/styles/taiga-ui-mobile.less
@@ -33,4 +33,5 @@
     @import './common/title';
     @import './common/card-large';
     @import './common/segmented';
+    @import './common/header';
 }
diff --git a/projects/layout/components/header/header.styles.less b/projects/layout/components/header/header.styles.less
index 08d773d5c1dd..35ae5fa26c7b 100644
--- a/projects/layout/components/header/header.styles.less
+++ b/projects/layout/components/header/header.styles.less
@@ -80,6 +80,10 @@
     }
 
     &[data-size='xxs'] {
+        [tuiTitle] {
+            gap: 0.125rem;
+        }
+
         [tuiTitle],
         [tuiAccessories] {
             font: var(--tui-font-text-xl);
@@ -94,16 +98,3 @@
         }
     }
 }
-
-tui-root._mobile [tuiHeader] {
-    [tuiAccessories] {
-        gap: 1rem;
-    }
-
-    &[data-size='xxs'] {
-        [tuiTitle],
-        [tuiAccessories] {
-            font: var(--tui-font-heading-6);
-        }
-    }
-}