Issue #3191727 by Santosh_Verma, Gauravvvv, imalabya, chetanbharambe,...

Issue #3191727 by Santosh_Verma, Gauravvvv, imalabya, chetanbharambe, Harish1688, chetansonawane, lauriii, smustgrave, mherchel: Focus states on mobile second level navigation items can get cut off in Olivero

(cherry picked from commit 924d567a)

core/themes/olivero/css/components/navigation/nav-primary.css

@@ -173,6 +173,14 @@
   opacity: 1;
 }
 
+.primary-nav__menu--level-2 .primary-nav__menu-item--level-2:first-child {
+  padding-block-start: var(--sp0-25);
+}
+
+.primary-nav__menu--level-2 .primary-nav__menu-item--level-2:last-child {
+  padding-block-end: var(--sp0-25);
+}
+
 @media (min-width: 43.75rem) {
   .primary-nav__menu--level-2 {
     margin-inline-start: calc(-1 * var(--sp3));

core/themes/olivero/css/components/navigation/nav-primary.pcss.css

@@ -165,6 +165,16 @@
     opacity: 1;
   }
 
+  & .primary-nav__menu-item--level-2 {
+    &:first-child {
+      padding-block-start: var(--sp0-25);
+    }
+
+    &:last-child {
+      padding-block-end: var(--sp0-25);
+    }
+  }
+
   @media (--md) {
     margin-inline-start: calc(-1 * var(--sp3));
     padding-inline-start: var(--sp3);