Change implementation if sidebar tabs from "inline" to "flex" and override overflow rules to avoid that scrollbars are always shown

modules/ifc_models/app/assets/stylesheets/ifc_viewer/generic.sass

@@ -46,7 +46,7 @@
     z-index: 2000
 
 
-// -------------------------- BUTTONS --------------------------
+// -------------------------- XEOKIT specific rules for BUTTONS --------------------------
 .xeokit-btn-group
   vertical-align: middle
   margin-right: .5rem

modules/ifc_models/app/assets/stylesheets/ifc_viewer/tabs.sass

@@ -6,32 +6,50 @@
   label
     @include varprop(color, main-menu-font-color)
 
-// -------------------------- XEOKIT specific --------------------------
+// -------------------------- XEOKIT specific rules for TABS --------------------------
 .xeokit-tabs
-  .xeokit-tab
-    display: inline
-
-    &.active
-      .xeokit-tab-button
-        border-bottom: 2px solid white
+  display: flex
 
-      .xeokit-tab-content
-        display: block
+  .xeokit-tab
+    flex: 1 1 auto
 
+  // As the button and the content are in the same container,
+  // we have to position the content absolutely.
+  // Otherwise we could not show the buttons next to each other.
   .xeokit-tab-content
     display: none
-    padding: 1.5em 10px
+    position: absolute
+    left: 0
+    padding: 1.5em 15px
     width: 100%
-    height: 100%
-    float: left
+
+    .active &
+      display: block
+
+    // Override inline style of xeokit
+    .xeokit-models,
+    .xeokit-objects,
+    .xeokit-classes
+      overflow: hidden !important
+
+      .xeokit-btn-group
+        margin-bottom: 10px
+
+        .xeokit-btn
+          @include varprop(color, main-menu-font-color)
+          background-color: transparent
+          border: 1px solid
+          @include varprop(border-color, main-menu-font-color)
 
   .xeokit-tab-button
-    background-color: transparent
-    color: #ffffff
     display: inline-block
+    @include varprop(color, main-menu-font-color)
     font-weight: bold
-    padding: 0.75em 5px !important
-    text-decoration: none
+    padding: 0 5px !important
+
+    .active &
+      border-bottom: 2px solid
+      @include varprop(border-color, main-menu-font-color)
 
     &:hover
       border-bottom: 2px solid white
@@ -39,14 +57,6 @@
     &:focus
       outline: none
 
-  .xeokit-btn-group
-    margin-bottom: 10px
-
-    .xeokit-btn
-      color: #ffffff
-      background-color: transparent
-      border: 1px solid #ffffff
-
 .xeokit-objectsTab
   ul
     list-style: none

modules/ifc_models/app/assets/stylesheets/ifc_viewer/toolbar.sass

@@ -26,6 +26,7 @@
 
 
 // -------------------------- XEOKIT specific --------------------------
+// Move toolbar to the right
 .xeokit-toolbar
   display: flex
   flex-wrap: wrap