fix(VSystemBar): reserve space for hidden scrollbar from VOverlay (#16734)

Fixes #16727

Author: KaelWD

packages/docs/src/components/app/V2Banner.vue

@@ -1,11 +1,10 @@
 <template>
   <v-system-bar
     v-if="showBanner"
-    class="px-4 py-1 "
     color="#e7f0f6"
     height="52"
   >
-    <div class="text-blue-darken-3 text-start">
+    <div class="text-blue-darken-3 text-start ms-4">
       <div class="text-caption">
         You are currently viewing the documentation for <strong>Vuetify 3</strong>
       </div>
@@ -25,7 +24,7 @@
     </v-btn>
 
     <v-btn
-      class="ms-6 me-2"
+      class="ms-6 me-6"
       density="comfortable"
       size="small"
       icon="$clear"

packages/vuetify/src/components/VSystemBar/VSystemBar.sass

@@ -8,7 +8,8 @@
   height: $system-bar-height
   justify-content: $system-bar-justify-content
   max-width: 100%
-  padding: $system-bar-padding
+  padding-inline-start: $system-bar-padding-x
+  padding-inline-end: $system-bar-padding-x
   position: relative
   text-align: $system-bar-text-align
   width: 100%
@@ -26,3 +27,6 @@
 
   &--window
     height: $system-bar-window-height
+
+  &:not(.v-system-bar--absolute)
+    padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x})

packages/vuetify/src/components/VSystemBar/_variables.scss

@@ -16,7 +16,7 @@ $system-bar-justify-content: flex-end !default;
 $system-bar-letter-spacing: tools.map-deep-get(settings.$typography, 'caption', 'letter-spacing') !default;
 $system-bar-lights-out-background: rgba(var(--v-theme-background), 0.7) !default;
 $system-bar-line-height: tools.map-deep-get(settings.$typography, 'caption', 'line-height') !default;
-$system-bar-padding: 0 8px !default;
+$system-bar-padding-x: 8px !default;
 $system-bar-positions: absolute fixed !default;
 $system-bar-text-align: end !default;
 $system-bar-text-transform: tools.map-deep-get(settings.$typography, 'caption', 'text-transform') !default;
@@ -35,3 +35,6 @@ $system-bar-typography: (
   $system-bar-line-height,
   $system-bar-text-transform
 );
+
+// Deprecated
+$system-bar-padding: 0 8px !default;