Remove overflow:overlay usage

src/lib/editor/editor.component.html

@@ -19,7 +19,7 @@
 
     <div>
 
-      <div id="paper-container" style="overflow:overlay;">
+      <div id="paper-container">
         <div id="paper" class="paper" tabindex="0" style="overflow: hidden; position: absolute; display: block; height:100%; width:100%; overflow:auto;"></div>
       </div>
 

src/lib/editor/editor.component.scss

@@ -53,8 +53,9 @@ flo-view {
   top: 0;
   bottom: 0;
   right: 0;
-  overflow: hidden;
+  overflow: auto;
   color: #FFF;
+  background-color: #FFF;
 }
 
 /* Tooltip START */

src/lib/editor/editor.component.ts

@@ -16,6 +16,8 @@ export interface VisibilityState {
   children: Array<VisibilityState>;
 }
 
+const SCROLLBAR_SIZE = 17;
+
 @Component({
   selector: 'flo-editor',
   templateUrl: './editor.component.html',
@@ -784,8 +786,8 @@ export class EditorComponent implements OnInit, OnDestroy {
     const parentWidth = parent.innerWidth();
     const parentHeight = parent.innerHeight();
     this.fitToContent(this.gridSize, this.gridSize, this.paperPadding, {
-      minWidth: parentWidth,
-      minHeight: parentHeight,
+      minWidth: parentWidth - SCROLLBAR_SIZE,
+      minHeight: parentHeight - SCROLLBAR_SIZE,
       allowNewOrigin: 'same'
     });
   }
@@ -802,7 +804,7 @@ export class EditorComponent implements OnInit, OnDestroy {
       minScaleY: minScale,
       maxScaleX: maxScale,
       maxScaleY: maxScale,
-      fittingBBox: {x: 0, y: 0, width: parentWidth, height: parentHeight}
+      fittingBBox: {x: 0, y: 0, width: parentWidth - SCROLLBAR_SIZE, height: parentHeight - SCROLLBAR_SIZE}
     });
     /**
      * Size the canvas appropriately and allow origin movement

src/lib/palette/palette.component.html

@@ -1,7 +1,7 @@
 <div id="palette-filter" class="palette-filter">
   <input type="text" id="palette-filter-textfield" class="palette-filter-textfield" [(ngModel)]="filterText" (focus)="onFocus()"/>
 </div>
-<div id="palette-paper-container" style="height:calc(100% - 46px); width:100%; overflow:overlay;">
+<div id="palette-paper-container" style="height:calc(100% - 46px); width:100%;">
   <div id="palette-paper" class="palette-paper" style="overflow:hidden;"></div>
 </div>
 

src/lib/palette/palette.component.scss

@@ -22,6 +22,13 @@
   background-color: transparent;
 }
 
+#palette-paper-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: white;
+  color: white;
+}
+
 /* Joint JS paper for drawing palette -> canvas DnD visual feedback END */
 
 /* Palette START */