[FIX] styles for POS scrollbars

src/App.vue

@@ -81,50 +81,72 @@
 </script>
 
 <style lang="sass">
-    .vue-form-wizard
+    .pos
         width: 100%
         height: 100%
-        padding-bottom: 0
-        display: flex
-        flex-direction: column
-        .wizard-header
-            display: none
-        .wizard-navigation
+        position: absolute
+
+        .vue-form-wizard
             width: 100%
-            flex-grow: 1
-            .wizard-progress-with-circle
-                top: 35px
-            .wizard-icon-circle
-                width: 60px
-                height: 60px
-            .wizard-tab-content
-                padding: 0
-                .products
+            height: 100%
+            padding-bottom: 0
+            
+            .wizard-header
+                display: none
+
+            .wizard-navigation
+                width: 100%
+                height: 100%
+
+                .wizard-progress-with-circle
+                    top: 35px
+
+                .wizard-icon-circle
+                    width: 60px
+                    height: 60px
+
+                .wizard-tab-content
                     width: 100%
-                    height: 100%
-                    padding: 10px
-                    display: block
-                    background: #fff
-                    .products-container
-                        width: calc(100% - 300px)
-                        height: 100%
-                        padding-right: 5px
-                        display: inline-block
-                    .cart-container
-                        width: 300px
-                        height: 100%
-                        border-left: 1px solid #d3d3d3
-                        padding-left: 10px
-                        display: inline-block
-                        vertical-align: top
-        .wizard-card-footer
-            padding-bottom: 15px
-            .wizard-btn
-                width: 160px
-                height: 40px
-                border-radius: 0
-                box-shadow: none
-                border: none
-                &:hover, &:focus
-                    background: #7c7bad
+                    height: calc(100% - 82px)
+                    padding: 0
+                    overflow: hidden
+
+                    .wizard-tab-container
+                        width: calc(100% - 20px)
+                        height: calc(100% - 20px)
+                        margin: 10px
+
+                        .products
+                            width: 100%
+                            height: 100%
+                            display: block
+                            background: #fff
+
+                            .products-container
+                                width: calc(100% - 300px)
+                                height: 100%
+                                padding-right: 5px
+                                display: inline-block
+
+                            .cart-container
+                                width: 300px
+                                height: 100%
+                                border-left: 1px solid #d3d3d3
+                                padding-left: 10px
+                                display: inline-block
+                                vertical-align: top
+            .wizard-card-footer
+                width: 100%
+                padding: 10px 10px
+                position: absolute
+                bottom: 0
+
+                .wizard-btn
+                    width: 160px
+                    height: 40px
+                    border-radius: 0
+                    box-shadow: none
+                    border: none
+                    &:hover, &:focus
+                        background: #7c7bad
 </style>

src/components/CartItems.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
-    transition-group(name="list" tag="ul" class="cart-items")
-        cart-item(v-for="item in items" :key="item" :item="item" :symbol="symbol")
+    .cart-items-wrapper
+        transition-group(name="list" tag="ul" class="cart-items")
+            cart-item(v-for="item in items" :key="item" :item="item" :symbol="symbol")
 </template>
 
 <script>
@@ -30,15 +31,16 @@
 <style lang="sass">
     .cart-items-wrapper
         width: 100%
-        height: 100%
+        height: calc(100% - 125px)
         overflow-y: auto
         overflow-x: hidden
+        padding: 0
+        margin: 15px 0
 
     .cart-items
         width: 100%
-        height: calc(100% - 30px)
         padding: 0
-        margin: 15px 0
+        margin: 0
 
     .list-enter-active, .list-leave-active
         transition: all 0.3s

src/components/CustomerSearcher.vue

@@ -64,9 +64,8 @@
 
 <style lang="sass">
     .customer-searcher
-        width: calc(100% - 30px) 
+        width: 100%
         height: 35px
-        margin: 15px
 
         input
             width: 100%

src/components/CustomersGrid.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
-    .customers-grid
-        customer-card(v-for="customer in customers" :key="customer" :item="customer")
+    .customers-grid-wrapper
+        .customers-grid
+            customer-card(v-for="customer in customers" :key="customer" :item="customer")
 </template>
 
 <script>
@@ -18,8 +19,12 @@
 </script>
 
 <style lang="sass">
-    .customers-grid
+    .customers-grid-wrapper
         width: 100%
-        heigth: calc(100% - 30px)
-        margin: 0 15px
+        height: calc(100% - 100px)
+        margin-top: 15px
+        overflow-y: auto
+
+        .customers-grid
+            width: 100%
 </style>

src/components/ProductsGrid.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
-    .products-grid
-        product-card(v-for="product in products" :key="product" :item="product" :symbol="symbol")
-        product-selector
+    .products-grid-wrapper
+        .products-grid
+            product-card(v-for="product in products" :key="product" :item="product" :symbol="symbol")
+            product-selector
 </template>
 
 <script>
@@ -33,9 +34,12 @@
 </script>
 
 <style lang="sass">
-    .products-grid
+    .products-grid-wrapper
         width: 100%
-        // height: 100%
-        padding-top: 15px
+        height: calc(100% - 50px)
+        margin-top: 15px
         overflow-y: auto
+
+        .products-grid
+            width: 100%        
 </style>