[IMP] point_of_sale: limit categories height to 60%

When categories on the point of sale take too much height, the product
and overflown categories are not visible.

In those instance Odoo wizards would usually:

- use an option to have small categories without pictures,

- have a category "all" with all the product,

- do a custom change to reduce the size of categories or add a scrollbar

This commit add the last customization in stable.

If the category block is bigger than 60% of the page height, the
categories are cropped and a scrollbar is added.

closes #10588

opw-660383

addons/point_of_sale/static/src/css/pos.css

@@ -885,7 +885,20 @@ td {
     display: inline-block;
     margin: 9px 5px;
 }
+.pos .category-list-scroller{
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+            box-sizing: border-box;
+    width:100%;
+    height:100%;
+    max-height:60vh;
+    overflow: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    -webkit-transform: translate3d(0,0,0);
 
+}
 .pos .category-list {
     text-align: left;
     padding: 10px;

addons/point_of_sale/static/src/xml/pos.xml

@@ -194,7 +194,9 @@
         </header>
         <t t-if="widget.subcategories.length > 0">
             <div class="categories">
-                <div class="category-list">
+                <div class="category-list-scroller touch-scrollable">
+                    <div class="category-list">
+                    </div>
                 </div>
             </div>
         </t>