feat(navbar-padding): use the responsivity of the main content padding CSS variables

src/App.vue

@@ -42,15 +42,18 @@ watch(colorScheme, val => updateColorScheme(val))
 </template>
 
 <style scoped>
-.main-content {
+#app-wrapper {
     --main-content-padding-x: 30px;
     --main-content-padding-y: 40px;
     --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
+}
+
+.main-content {
     flex-grow: 1;
 }
 
 @media (max-width: 48rem) {
-    .main-content {
+    #app-wrapper {
         --main-content-padding-x: 15px;
     }
 }

src/features/nav/components/Navbar.vue

@@ -42,7 +42,7 @@ import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 18px 40px;
+    padding: 18px var(--main-content-padding-x);
     height: 42px;
 }