refactor: always use some amount of padding in app-layout navbar (#10547)

Author: web-padawan

dev/aura/aura-view.css

@@ -34,7 +34,7 @@
 .aura-view-header,
 .aura-view[slot='navbar'] > footer,
 .aura-view-footer[slot='navbar'] {
-  padding-top: max(var(--vaadin-padding-m), var(--safe-area-inset-top));
+  padding-top: max(var(--vaadin-padding-s), var(--safe-area-inset-top));
 }
 
 .aura-view[slot='navbar'] > :is(header, footer),
@@ -44,6 +44,17 @@
   margin-top: calc(var(--safe-area-inset-top) * -1);
 }
 
+.aura-view[slot='navbar'] > :is(header, footer),
+:is(.aura-view-header, .aura-view-footer)[slot='navbar'] {
+  padding: 0;
+  padding-top: var(--safe-area-inset-top);
+}
+
+.aura-view[slot='navbar'] > footer,
+.aura-view-footer[slot='navbar'] {
+  margin-inline-start: auto;
+}
+
 .aura-view:not([slot='navbar']) > footer,
 .aura-view-footer:not([slot='navbar']) {
   padding-bottom: max(var(--vaadin-padding-m), var(--safe-area-inset-bottom));

packages/aura/src/components/app-layout.css

@@ -3,11 +3,9 @@
   --aura-app-layout-inset: 1.5vmin;
   --aura-app-layout-radius: var(--vaadin-radius-l);
   --aura-app-layout-border-width: 1px;
-  /* Use px to ensure calc/min/max work */
-  --vaadin-app-layout-navbar-padding-top: 0px;
-  --vaadin-app-layout-navbar-padding-bottom: 0px;
-  --vaadin-app-layout-navbar-padding-inline-start: 0px;
-  --vaadin-app-layout-navbar-padding-inline-end: 0px;
+  --vaadin-app-layout-navbar-padding-top: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
+  --vaadin-app-layout-navbar-padding-inline-start: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
+  --vaadin-app-layout-navbar-padding-inline-end: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
 }
 
 /* Aligned with App Layout overlay breakpoint */