Fix iframe scroll on Android tablets, add scrollbar (#117)

skins/elastic/styles/layout.less

@@ -152,11 +152,20 @@ body > #layout {
     }
 }
 
-html.iframe body {
-    overflow: auto;
+html.iframe {
+    &.ipad,
+    &.iphone,
+    &.webkit.mobile,
+    &.webkit.tablet {
+        .webkit-scroller;
+    }
+
+    body {
+        overflow: auto;
 
-    #layout > .content {
-        height: 100%;
+        #layout > .content {
+            height: 100%;
+        }
     }
 }
 

skins/elastic/styles/mixins.less

@@ -55,3 +55,23 @@
 .font-family {
     font-family: Roboto, sans-serif;
 }
+
+.webkit-scroller {
+    ::-webkit-scrollbar {
+        -webkit-appearance: none;
+    }
+
+    ::-webkit-scrollbar:vertical {
+        width: .6rem;
+    }
+
+    ::-webkit-scrollbar:horizontal {
+        height: .6rem;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, .4);
+        border-radius: .3rem;
+        border: 2px solid #fff;
+    }
+}

skins/elastic/styles/widgets/forms.less

@@ -332,15 +332,12 @@ html.ms .propform {
         }
     }
 
-    // FIXME: iOS/Android frames have some problem with form buttons element
-    //        when the form height is bigger than the iframe height
-    //        We got rid of the floating buttons effect to fix that,
-    //        which is not perfect because Save button are visible only after
-    //        the page is scrolled to the bottom
-    .webkit.tablet &,
-    .iframe.ipad &,
-    .iframe.iphone & {
-        display: block;
+    // Prevent button truncation on tablets
+    html.iframe.ipad &,
+    html.iframe.webkit.tablet & {
+        .formbuttons {
+            min-height: 4rem;
+        }
     }
 
     // We don't need buttons element on small devices