fix: margins for nav on mobile (#6908)

* fix margins for nav

* fix spacing on mobile

* Revert "fix spacing on mobile"

This reverts commit c87791669a826dd37f93ad219ad8e780e333b5b1.

* update css for minis

src/components/NavBar/style.css.ts

@@ -60,8 +60,9 @@ const baseMenuItem = style([
   subhead,
   sprinkles({
     paddingY: '8',
-    paddingX: '14',
+    paddingX: { sm: '6', md: '14' },
     marginY: '4',
+    marginX: { sm: '4', md: '0' },
     borderRadius: '12',
     transition: '250',
     height: 'min',
@@ -69,7 +70,6 @@ const baseMenuItem = style([
     textAlign: 'center',
     display: 'flex',
     alignItems: 'center',
-    gap: '4',
   }),
   {
     lineHeight: '24px',