✨ Move layers and assets to tabs

frontend/resources/styles/main/partials/sidebar.scss

@@ -20,40 +20,10 @@
   }
 
   .settings-bar-inside {
-    align-items: flex-start;
     display: grid;
     grid-template-columns: 100%;
-
-    &[data-layout*="sitemap-pages"] {
-      grid-template-rows: auto;
-    }
-
-    &[data-layout*="layers"] {
-      grid-template-rows: auto 1fr;
-    }
-
-    &[data-layout*="libraries"] {
-      grid-template-rows: auto 1fr;
-    }
-
-    &[data-layout*="layers"][data-layout*="sitemap-pages"] {
-      grid-template-rows: 11.5rem 1fr;
-    }
-
-    &[data-layout*="libraries"][data-layout*="sitemap-pages"] {
-      grid-template-rows: 11.5rem 1fr;
-    }
-
-    &[data-layout*="layers"][data-layout*="libraries"] {
-      grid-template-rows: auto 30% 1fr;
-    }
-
-    &[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
-      grid-template-rows: 11.5rem 25% 1fr;
-    }
-
-    flex-direction: column;
-    height: 100%;
+    grid-template-rows: 100%;
+    height: calc(100% - 2px);
 
     .tool-window {
       position: relative;
@@ -171,9 +141,9 @@
 .tool-window-content {
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
   height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .element-list {
@@ -259,3 +229,15 @@ button.collapse-sidebar {
     }
   }
 }
+
+#layers.tool-window {
+  overflow: auto;  
+}
+
+.layers-tab {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 100%;
+  height: 100%;
+  overflow: hidden;
+}

frontend/resources/styles/main/partials/tab-container.scss

@@ -1,8 +1,8 @@
 .tab-container {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 100%;
   height: 100%;
-  width: 100%;
 }
 
 .tab-container-tabs {
@@ -31,7 +31,8 @@
 }
 
 .tab-container-content {
-  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .tab-element,

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -50,8 +50,9 @@
                          :selected section}
 
        [:& tab-element {:id :layers :title "Layers"}
-        [:& sitemap {:layout layout}]
-        [:& layers-toolbox]]
+        [:div.layers-tab
+         [:& sitemap {:layout layout}]
+         [:& layers-toolbox]]]
 
        [:& tab-element {:id :assets :title "Library"}
         [:& assets-toolbox]]]]]))

frontend/src/app/util/dom.cljs

@@ -416,6 +416,7 @@
 
 (defn scroll-into-view-if-needed!
   ([^js element]
+   (.log js/console "SCROLL INTO VIEW" element)
    (when (some? element)
      (.scrollIntoViewIfNeeded ^js element false)))