fix(layout): Header fix subtitile padding on mobile (#9282)

taiga-family · Sep 30, 2024 · faeca9e · faeca9e
1 parent 0eb3a39
commit faeca9e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/projects/addon-mobile/styles/common/header.less 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
@@ -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
@@ -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);
-        }
-    }
-}