fix(docs): QScrollArea -> style props -> do not use "right" directly, but through horizontal/vertical-offset props #17597

Author: rstoenescu

docs/src/examples/QScrollArea/Styled.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="q-ma-md">
     <q-scroll-area
+      :horizontal-offset="[0, 2]"
       :thumb-style="thumbStyle"
       :content-style="contentStyle"
       :content-active-style="contentActiveStyle"
@@ -30,7 +31,6 @@ export default {
       },
 
       thumbStyle: {
-        right: '2px',
         borderRadius: '5px',
         backgroundColor: '#027be3',
         width: '5px',

docs/src/examples/QScrollArea/StyledBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="q-ma-md">
     <q-scroll-area
+      :horizontal-offset="[0, 2]"
       :thumb-style="thumbStyle"
       :bar-style="barStyle"
       style="height: 200px; max-width: 300px;"
@@ -19,15 +20,13 @@ export default {
   setup () {
     return {
       thumbStyle: {
-        right: '4px',
         borderRadius: '5px',
         backgroundColor: '#027be3',
         width: '5px',
         opacity: 0.75
       },
 
       barStyle: {
-        right: '2px',
         borderRadius: '9px',
         backgroundColor: '#027be3',
         width: '9px',

docs/src/examples/QScrollArea/Synchronized.vue

@@ -2,6 +2,7 @@
   <div class="q-ma-md row no-wrap">
     <q-scroll-area
       visible
+      :horizontal-offset="[0, 2]"
       :thumb-style="thumbStyle"
       :bar-style="barStyle"
       style="height: 200px;"
@@ -18,6 +19,7 @@
 
     <q-scroll-area
       visible
+      :horizontal-offset="[0, 2]"
       :thumb-style="thumbStyle"
       :bar-style="barStyle"
       style="height: 200px;"
@@ -74,15 +76,13 @@ export default {
       secondRef,
 
       thumbStyle: {
-        right: '4px',
         borderRadius: '7px',
         backgroundColor: '#027be3',
         width: '4px',
         opacity: 0.75
       },
 
       barStyle: {
-        right: '2px',
         borderRadius: '9px',
         backgroundColor: '#027be3',
         width: '8px',