fix(UIShell): reduce padding on header name to fix action button (#11687

) (#12245)

* fix(UIShell): reduce padding on header name to fix action button(#11687)

UIShell: SideNav Rail w/header - reduce padding to fix width of action button

by: Animesh Samaiya (asamaiya00@gmail.com)

* fix(UIShell): use spacing tokens (#11687)

UIShell: SideNav Rail w/header - reduce padding to fix width of action button

    by: Animesh Samaiya (asamaiya00@gmail.com)

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/styles/scss/components/ui-shell/header/_header.scss

@@ -10,6 +10,7 @@
 @use '../../../breakpoint' as *;
 @use '../../../config' as *;
 @use '../../../motion' as *;
+@use '../../../spacing' as *;
 @use '../../../theme' as *;
 @use '../../../type' as *;
 @use '../../../utilities/button-reset';
@@ -42,6 +43,9 @@
     border: rem(1px) solid transparent;
     transition: background-color $duration-fast-02,
       border-color $duration-fast-02;
+    @include breakpoint-down('md') {
+      min-width: $spacing-09;
+    }
   }
 
   .#{$prefix}--header__action
@@ -137,6 +141,9 @@
     text-decoration: none;
     transition: border-color $duration-fast-02;
     user-select: none;
+    @include breakpoint-down('md') {
+      padding: 0 $spacing-05;
+    }
   }
 
   a.#{$prefix}--header__name:focus {