From 1f794a6811a61b53ce740401330aa49531ec9233 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Tue, 5 Mar 2019 14:04:57 +0100
Subject: [PATCH] improve layout

---
 data/layout.xml          | 310 ++++++++++++++++++++++-----------------
 src/app_layout.cpp       |   4 +
 src/node_panel_grid.cpp  |   2 +-
 src/node_panel_grid.h    |   4 +-
 src/node_panel_layer.cpp |   2 +-
 src/node_panel_layer.h   |   3 +-
 src/node_scroll.cpp      |   2 +-
 7 files changed, 188 insertions(+), 139 deletions(-)

diff --git a/data/layout.xml b/data/layout.xml
index 3f86222..584d0c1 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -8,23 +8,9 @@
     </button-custom>
   </layout>
 
-  <!--layer template-->
-  <layout id="tpl-layer">
-    <border height="30" border-color="1" thickness="1" color=".4" dir="col" margin="1 0 1 0">
-      <node dir="row" height="30">
-        <node width="30" pad="1">
-          <checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
-        </node>
-        <node width="1" grow="1" justify="center" pad="5">
-          <text id="label"/>
-        </node>
-      </node>
-    </border>
-  </layout>
-  
-  <!--layers panel template-->
+  <!-- PANEL LAYERS -->
   <layout id="tpl-panel-layers">
-    <node width="350" margin="0 0 10 0" rtl="ltr">
+    <node width="300" margin="0 0 10 0" rtl="ltr">
       <border height="30" color=".5" align="center" justify="center" margin="0 0 0 0">
         <text text="Layers" color="1 1 1 1"/>
       </border>
@@ -35,9 +21,9 @@
         <slider-h id="opacity" value="1" grow="1" width="1" margin="0 5 0 0"/>
       </border>
 
-      <border id="layers-container" pad="5" color=".4" dir="col" flood-events="1">
+      <scroll id="layers-container" pad="5" color=".4" dir="col" flood-events="1">
         <!--layers list-->
-      </border>
+      </scroll>
       
       <border height="40" color=".5" dir="row" align="center" flood-events="1">
         <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
@@ -59,8 +45,20 @@
       </border>
     </node>
   </layout>
-    
-  <!--brush-presets panel-->
+  <layout id="tpl-layer">
+    <border height="30" border-color="1" thickness="1" color=".4" dir="col" margin="1 0 1 0">
+      <node dir="row" height="30">
+        <node width="30" pad="1">
+          <checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
+        </node>
+        <node width="1" grow="1" justify="center" pad="5">
+          <text id="label"/>
+        </node>
+      </node>
+    </border>
+  </layout>
+
+  <!-- PANEL PRESETS -->
   <layout id="tpl-panel-brush-preset">
     <node rtl="ltr" min-width="315">
       <scroll id="brushes" color=".4" pad="5 20 5 5" dir="col" wrap="0" flood-events="1" grow="1" height="1"/>
@@ -84,7 +82,6 @@
       </border>
     </node>
   </layout>
-  <!--brush-presets-item icon-->
   <layout id="tpl-brush-preset">
     <button-custom width="300" height="70" margin="1" pad="5" align="center" justify="center" dir="row">
       <node width="30" align="center">
@@ -98,7 +95,7 @@
     </button-custom>
   </layout>
 
-  <!--brushes panel-->
+  <!-- PANEL TIPS/PATTERN -->
   <layout id="tpl-panel-brushes">
     <node rtl="ltr">
       <scroll id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1" grow="1" height="1"/>
@@ -125,7 +122,7 @@
     </node>
   </layout>
 
-  <!--color panel-->
+  <!-- PANEL COLOR PICKER -->
   <layout id="tpl-panel-color">
     <node width="350" margin="0 0 10 0" rtl="ltr">
       <border height="30" color=".5" align="center" justify="center">
@@ -138,14 +135,14 @@
     </node>
   </layout>
 
-  <!--stroke panel-->
+  <!-- PANEL STROKE -->
   <layout id="tpl-panel-stroke">
     <node width="350" margin="0 0 10 0" rtl="ltr">
-      <border height="30" color=".4" align="center" justify="flex-end" dir="row">
-        <!--<node align="center" width="1" grow="1">
+      <border height="30" pad="5 0 0 0" color=".4" align="center" justify="center" dir="row">
+        <node align="center" pad="0 0 0 30" justify="center" height="100%" width="1" grow="1">
           <text text="Brush Settings"/>
-        </node>-->
-        <button id="button-unfold-all" width="30" height="18" text="+" margin="0 5 0 0"/>
+        </node>
+        <button id="button-unfold-all" width="30" height="20" text="+" margin="0 5 0 0"/>
       </border>
       <border color=".4" pad="5" dir="col" width="100%">
 
@@ -637,77 +634,126 @@
     </node>
   </layout>
 
-  <!--grids panel-->
+  <!-- PANEL GRIDS -->
   <layout id="tpl-panel-grid">
     <node width="350" margin="0 0 10 0" rtl="ltr">
       <border height="30" color=".5" align="center" justify="center">
         <text text="Grids" color="1 1 1 1"/>
       </border>
       <border color=".3" pad="5" dir="col" width="100%">
-        
-        <node dir="row">
-          <node width="36%" dir="col">
-            <node height="20" justify="center"><text text="Opacity"/></node>
-            <node height="20" justify="center"><text text="Value"/></node>
-            <node height="20" justify="center"><text text="Offset"/></node>
-            <node height="30" justify="center" margin="5 0 0 0"><text text="Resolution"/></node>
+
+        <node dir="row" margin="0 0 10 0">
+          <node width="200" grow="1"  margin="0 5 0 0">
+            <border color=".2" height="20" justify="center" align="center">
+              <text text="Heightmap"/>
+            </border>
+            <border color="1" align="center" pad="5" margin="0 0 5 0" min-height="70">
+              <image-texture id="grid-heightmap-preview" width="100%" grow="1" height="100" aspect-ratio="1"/>
+            </border>            
           </node>
-          <node dir="col" align="center" grow="1" width="1" flood-events="1">
-            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-opacity"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-value" value="0.0"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-ground-offset" value="0.25"/></node>
-            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-              <combobox id="grid-ground-resolution" width="100%" height="30" combo-list="0.1,0.5,1,2,4,8" default="2"/>
-            </node>
+          <node width="100" pad="0" dir="col">
+            <button id="grid-heightmap-load" text="Open" width="100" height="30" margin="0 2 0 0"/>
+            <button id="grid-heightmap-clear" text="Clear" width="100" height="30" margin="0 2 0 0"/>
+            <button id="grid-heightmap-reload" text="Reload" width="100" height="30" margin="0 2 0 0"/>
           </node>
         </node>
-        <node height="5"/>
-        <border color=".2" height="20" justify="center" align="center"><text text="Heightmap"/></border>
-        <border color="1" align="center" pad="5" margin="0 0 5 0">
-          <image-texture id="grid-heightmap-preview" width="100%" grow="1" height="100" aspect-ratio="1"/>
-        </border>
-        <node dir="row">
-          <node width="36%" dir="col">
-            <node height="30" justify="center"><text text="File"/></node>
-            <node height="30" justify="center" margin="5 0 0 0"><text text="Shading"/></node>
-            <node height="20" justify="center" margin="5 0 0 0"><text text="Wireframe"/></node>
-            <!--<node height="20" justify="center"><text text="Thickness"/></node>-->
-            <node height="20" justify="center"><text text="Height"/></node>
-            <node height="20" justify="center"><text text="Light Yaw"/></node>
-            <node height="20" justify="center"><text text="Light Pitch"/></node>
-            <node height="20" justify="center"><text text="Ambient"/></node>
-            <node height="20" justify="center"><text text="Radius"/></node>
-            <node height="30" justify="center" margin="5 0 0 0"><text text="Samples"/></node>
-            <node height="30" justify="center" margin="5 0 0 0"><text text="Tex Res."/></node>
-          </node>
-          <node dir="col" align="center" grow="1" width="1" flood-events="1" color=".3" >
-            <node height="30" width="100%" dir="row" pad="0 1 0 1">
-              <node width="20" grow="1" pad="0" dir="row">
-                <button id="grid-heightmap-load" text="Open" grow="1" width="52" height="30" margin="0 2 0 0"/>
-                <button id="grid-heightmap-clear" text="Clear" grow="1" width="55" height="30" margin="0 2 0 0"/>
-                <button-custom id="grid-heightmap-reload" pat="2">
-                  <icon icon="arrow_rotate_clockwise" width="30" height="30"/>
-                </button-custom>
+
+        <scroll id="scroller" color=".3" scroll-color=".2">
+          <node dir="row">
+            <node width="36%" dir="col">
+              <node height="20" justify="center">
+                <text text="Opacity"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Value"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Offset"/>
+              </node>
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Resolution"/>
               </node>
             </node>
-            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-              <combobox id="grid-heightmap-shading" width="100%" height="30" combo-list="Transparent,Flat,Solid,Textured" default="0"/>
-            </node>
-            <node height="20" pad="1" width="100%" margin="5 0 0 0"><slider-h id="grid-heightmap-wireframe" value="1.0"/></node>
-            <!--<node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-thickness" value="0.5"/></node>-->
-            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-height" value="0.25"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-lyaw" value="0.5"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-lpitch" value="0.1"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-ambient" value="0.0"/></node>
-            <node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-radius" value="0.25"/></node>
-            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-              <combobox id="grid-heightmap-samples" width="100%" height="30" combo-list="1,4,8,16,32,64,128" default="2"/>
-            </node>
-            <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-              <combobox id="grid-heightmap-texres" width="100%" height="30" combo-list="256,512,1024,2048,4096" default="1"/>
+            <node dir="col" align="center" grow="1" width="1" flood-events="1">
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-ground-opacity"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-ground-value" value="0.0"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-ground-offset" value="0.25"/>
+              </node>
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-ground-resolution" width="100%" height="30" combo-list="0.1,0.5,1,2,4,8" default="2"/>
+              </node>
             </node>
           </node>
-        </node>
+          <node height="5"/>
+          <node dir="row">
+            <node width="36%" dir="col">
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Shading"/>
+              </node>
+              <node height="20" justify="center" margin="5 0 0 0">
+                <text text="Wireframe"/>
+              </node>
+              <!--<node height="20" justify="center"><text text="Thickness"/></node>-->
+              <node height="20" justify="center">
+                <text text="Height"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Light Yaw"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Light Pitch"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Ambient"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Radius"/>
+              </node>
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Samples"/>
+              </node>
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Tex Res."/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1" flood-events="1" color=".3" >
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-heightmap-shading" width="100%" height="30" combo-list="Transparent,Flat,Solid,Textured" default="0"/>
+              </node>
+              <node height="20" pad="1" width="100%" margin="5 0 0 0">
+                <slider-h id="grid-heightmap-wireframe" value="1.0"/>
+              </node>
+              <!--<node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-thickness" value="0.5"/></node>-->
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-height" value="0.25"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-lyaw" value="0.5"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-lpitch" value="0.1"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-ambient" value="0.0"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-radius" value="0.25"/>
+              </node>
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-heightmap-samples" width="100%" height="30" combo-list="1,4,8,16,32,64,128" default="2"/>
+              </node>
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-heightmap-texres" width="100%" height="30" combo-list="256,512,1024,2048,4096" default="1"/>
+              </node>
+            </node>
+          </node>
+        </scroll>
+
         <button id="grid-render" text="Render Lightmap" height="30" margin="5 0 0 0"/>
         <button id="grid-commit" text="Commit to Layer" height="30" margin="5 0 0 0"/>
       
@@ -715,6 +761,7 @@
     </node>
   </layout>
   
+  <!-- MESSAGE BOX -->
   <layout id="message-box">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3">
@@ -732,6 +779,7 @@
     </border>
   </layout>
 
+  <!-- PROGRESS BAR -->
   <layout id="progress-bar">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3">
@@ -750,7 +798,7 @@
     </border>
   </layout>
 
-  <!-- Color Picker Dialog -->
+  <!-- PANEL COLOR PICKER EXTENDED -->
   <layout id="color-picker">
       <border positioning="absolute" position="0 0">
         <!--<border width="300" height="30" color=".2 .2 .2 .9" dir="row" align="center">
@@ -807,7 +855,7 @@
       </border>
   </layout>
 
-  <!-- Dialog Rename Layer -->
+  <!-- DIALOG RENAME LAYER -->
   <layout id="dialog-layer-rename">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3">
@@ -828,7 +876,7 @@
     </border>
   </layout>
 
-  <!-- Dialog Resize -->
+  <!-- DIALOG RESIZE -->
   <layout id="dialog-resize">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3">
@@ -851,8 +899,7 @@
     </border>
   </layout>
 
-  <!-- Browse Dialog Popup -->
-
+  <!-- DIALOG BROWSE -->
   <layout id="dialog-browse-item">
     <border dir="col" color=".4 .4 .4 .8" pad="4" height="120" width="100" margin="1 1 1 1" grow="1" align="center">
       <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1"/>
@@ -882,15 +929,13 @@
     </border>
   </layout>
 
-  <!-- Cloud Browse Dialog Popup -->
-
+  <!-- DIALOG CLOUD BROWSE -->
   <layout id="dialog-cloud-item">
     <border dir="col" color=".4 .4 .4 .8" pad="4" height="120" width="100" margin="1 1 1 1" grow="1" align="center">
       <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1"/>
       <text id="title" text="File Name" margin="5 0 0 0"/>
     </border>
   </layout>
-  
   <layout id="dialog-cloud">
     <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
@@ -910,8 +955,7 @@
     </border>
   </layout>
 
-  <!-- Open Dialog Popup -->
-
+  <!-- DIALOG OPEN SINGLE -->
   <layout id="dialog-open-item">
     <border dir="row" color=".4 .4 .4 .8" pad="4" height="30" margin="1 0 1 0" align="center">
       <!--<image-texture id="thumb-tex" width="64" height="64"/>-->
@@ -946,7 +990,7 @@
     </border>
   </layout>
   
-  <!-- Save Dialog Popup -->
+  <!-- DIALOG SAVE -->
   <layout id="dialog-save">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3">
@@ -969,7 +1013,7 @@
     </border>
   </layout>
   
-  <!-- NewDoc Dialog Popup -->
+  <!-- DIALOG NEW PANODOC -->
   <layout id="dialog-newdoc">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3">
@@ -994,7 +1038,7 @@
     </border>
   </layout>
 
-  <!--settings window-->
+  <!-- DIALOG SETTINGS -->
   <layout id="settings">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3" width="80%" min-width="400">
@@ -1032,7 +1076,7 @@
     </border>
   </layout>
 
-  <!--About window-->
+  <!-- DIALOG ABOUT -->
   <layout id="about">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="1">
       <border thickness="1" border-color=".2" pad="3" max-width="650">
@@ -1094,7 +1138,7 @@ Roboto Font License:
     </border>
   </layout>
 
-  <!--Changelog window-->
+  <!-- DIALOG CHANGELOG -->
   <layout id="changelog">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3" max-width="650">
@@ -1170,7 +1214,7 @@ Here's a list of what's available in this release.
     </border>
   </layout>
   
-    <!--UserManual window-->
+  <!-- DIALOG USER MANUAL -->
   <layout id="usermanual">
     <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
       <border thickness="1" border-color=".2" pad="3" max-width="650">
@@ -1205,8 +1249,7 @@ Here's a list of what's available in this release.
     </border>
   </layout>
 
-  
-  <!--popup menu-->
+  <!-- MENU POPUP -->
   <layout id="popup-menu">
     <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <button-custom height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
@@ -1232,7 +1275,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
 
-  <!--file menu-->
+  <!-- MENU FILE -->
   <layout id="file-menu">
     <popup-menu positioning="absolute" position="100 100" width="210" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <!--
@@ -1326,7 +1369,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
   
-  <!--file submenu - export-->
+  <!-- MENU FILE -> EXPORT -->
   <layout id="file-submenu-export">
     <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <button-custom id="file-submenu-export-png" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
@@ -1338,7 +1381,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
   
-  <!--edit menu-->
+  <!-- MENU EDIT -->
   <layout id="edit-menu">
     <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <button-custom height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
@@ -1356,7 +1399,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
 
-  <!--layers menu-->
+  <!-- MENU LAYERS -->
   <layout id="layers-menu">
     <popup-menu positioning="absolute" position="100 100" width="270" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <button-custom id="layer-clear" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
@@ -1382,7 +1425,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
 
-  <!-- timelapse menu -->
+  <!-- MENU TIMELAPSE -->
   <layout id="timelapse-menu">
     <popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <button-custom id="timelapse-start" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
@@ -1400,7 +1443,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
 
-  <!-- about menu -->
+  <!-- MENU ABOUT -->
   <layout id="about-menu">
     <popup-menu positioning="absolute" position="100 100" width="200" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
       <button-custom id="about-doc" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
@@ -1426,7 +1469,7 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
 
-  <!-- quick access -->
+  <!-- PANEL QUICK -->
   <layout id="tpl-panel-quick">
     <border color="0 0 0 0.3" width="80" dir="col" pad="5" align="center" mouse-capture="true" shrink="1">
       <node dir="row" pad="5">
@@ -1517,7 +1560,7 @@ Here's a list of what's available in this release.
           <text text="About"/>
         </button-custom>
         <!--<button id="btn-anim" width="70" height="100%" margin="1 0 0 10" text="Animate"/>-->
-        <node dir="row" justify="center" grow="1">
+        <node dir="row" margin="0 0 0 30">
           <!--panel togglers-->
           <button-custom id="btn-stroke" width="50" height="50" margin="0 5 0 0" thickness="1" border-color=".1" pad="2">
             <image path="data/ui/stroke.png" width="100%" height="100%" align="center" justify="flex-end"/>
@@ -1539,12 +1582,6 @@ Here's a list of what's available in this release.
             <image path="data/ui/grid.png" width="100%" height="100%" align="center" justify="flex-end" mips="true"/>
           </button-custom>
         </node>
-        <button-custom id="btn-undo" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
-          <image path="data/ui/undo.png" width="100%" height="100%" align="center" justify="flex-end"/>
-        </button-custom>
-        <button-custom id="btn-redo" width="50" height="100%" margin="0 0 0 5" thickness="1" border-color="0 0 0 1" pad="2">
-          <image path="data/ui/redo.png" width="100%" height="100%" align="center" justify="flex-end"/>
-        </button-custom>
         <!--
         <button-custom id="btn-layer" width="50" height="100%" margin="0 5 0 0" thickness="1" border-color="0 0 0 1" pad="6" align="center" justify="center">
           <icon width="100%" height="100%" icon="disk"/>
@@ -1554,40 +1591,47 @@ Here's a list of what's available in this release.
       <!-- central row -->
       <node grow="1" dir="row" wrap="1" height="0" id="central-row">
         <border color=".2 .2 .2 .6" pad="0 5 0 0" justify="center" dir="col" flood-events="1" mouse-capture="true">
-          <node margin="0 0 50 0" wrap="1" >
-            <button-custom id="btn-pen" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+          <node margin="0 0 40 0" wrap="1" >
+            <button-custom id="btn-pen" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/pen.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
-            <button-custom id="btn-pick" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button-custom id="btn-pick" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/picker.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
 
-            <button-custom id="btn-erase" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button-custom id="btn-erase" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/eraser.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
 
-            <button id="btn-cam" width="50" height="50" margin="2 0 2 5" text="Cam"/>
+            <button id="btn-cam" width="40" height="40" margin="2 0 2 5" text="Cam"/>
 
-            <button-custom id="btn-line" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button-custom id="btn-line" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/line.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
-            <button id="btn-grid" width="50" height="50" margin="2 0 2 5" text="Grid"/>
-            <button id="btn-copy" width="50" height="50" margin="2 0 2 5" text="Copy"/>
-            <button id="btn-cut" width="50" height="50" margin="2 0 2 5" text="Cut"/>
-            <!-- <button id="btn-fill" width="50" height="50" margin="0" text="Fill"/> -->
-            <button-custom id="btn-mask-free" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button id="btn-grid" width="40" height="40" margin="2 0 2 5" text="Grid"/>
+            <button id="btn-copy" width="40" height="40" margin="2 0 2 5" text="Copy"/>
+            <button id="btn-cut" width="40" height="40" margin="2 0 2 5" text="Cut"/>
+            <!-- <button id="btn-fill" width="40" height="40" margin="0" text="Fill"/> -->
+            <button-custom id="btn-mask-free" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/sel-free.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
-            <button-custom id="btn-mask-line" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button-custom id="btn-mask-line" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/sel-poly.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
 
-            <button-custom id="btn-bucket" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button-custom id="btn-bucket" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/bucket.png" width="100%" height="100%" align="center" justify="flex-end"/>
             </button-custom>
-            <button-custom id="btn-touchlock" width="50" height="50" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+            <button-custom id="btn-touchlock" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
               <image path="data/ui/notouch.png" width="100%" height="100%" align="center" justify="flex-end"/>
-            </button-custom>            
+            </button-custom>
+            
+            <button-custom id="btn-undo" width="40" height="40" margin="46 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+              <image path="data/ui/undo.png" width="100%" height="100%" align="center" justify="flex-end"/>
+            </button-custom>
+            <button-custom id="btn-redo" width="40" height="40" margin="2 0 2 5" thickness="1" border-color="0 0 0 1" pad="2">
+              <image path="data/ui/redo.png" width="100%" height="100%" align="center" justify="flex-end"/>
+            </button-custom>
           </node>
         </border>
         
diff --git a/src/app_layout.cpp b/src/app_layout.cpp
index 95753d9..0e8a2ee 100644
--- a/src/app_layout.cpp
+++ b/src/app_layout.cpp
@@ -303,6 +303,8 @@ void App::init_sidebar()
             layers->m_capture_children = false;
             layers->m_mouse_ignore = false;
             layers->mouse_capture();
+            auto scroll = layers->find<NodeScroll>("layers-container");
+            scroll->SetMaxHeight(glm::max(100.f, screen.y - pos.y - 200.f));
             layout[main_id]->update();
 
             layers->on_popup_close = [this, tick](Node*) {
@@ -328,6 +330,8 @@ void App::init_sidebar()
             grid->m_capture_children = false;
             grid->m_mouse_ignore = false;
             grid->mouse_capture();
+            auto scroll = grid->find<NodeScroll>("scroller");
+            scroll->SetMaxHeight(glm::max(100.f, screen.y - pos.y - 250.f));
             layout[main_id]->update();
 
             grid->on_popup_close = [this, tick](Node*) {
diff --git a/src/node_panel_grid.cpp b/src/node_panel_grid.cpp
index 94ce3dc..b0cfe88 100644
--- a/src/node_panel_grid.cpp
+++ b/src/node_panel_grid.cpp
@@ -33,7 +33,7 @@ void NodePanelGrid::init_controls()
     m_hm_preview = find<NodeImageTexture>("grid-heightmap-preview");
     m_hm_load = find<NodeButton>("grid-heightmap-load");
     m_hm_clear = find<NodeButton>("grid-heightmap-clear");
-    m_hm_reload = find<NodeButtonCustom>("grid-heightmap-reload");
+    m_hm_reload = find<NodeButton>("grid-heightmap-reload");
     m_hm_wireframe = find<NodeSliderH>("grid-heightmap-wireframe");
     m_hm_thickness = find<NodeSliderH>("grid-heightmap-thickness");
     m_hm_height = find<NodeSliderH>("grid-heightmap-height");
diff --git a/src/node_panel_grid.h b/src/node_panel_grid.h
index b2f76a9..0ce4246 100644
--- a/src/node_panel_grid.h
+++ b/src/node_panel_grid.h
@@ -46,7 +46,7 @@ public:
     NodeImageTexture* m_hm_preview;
     NodeButton* m_hm_load;
     NodeButton* m_hm_clear;
-    NodeButtonCustom* m_hm_reload;
+    NodeButton* m_hm_reload;
     NodeComboBox* m_hm_shading;
     NodeSliderH* m_hm_height;
     NodeSliderH* m_hm_wireframe;
@@ -68,7 +68,7 @@ public:
     Sampler m_sampler_linear;
     std::string m_file_path;
     nanort::BVHAccel<float> m_rt_accel;
-    bool m_rt_dirty = true;;
+    bool m_rt_dirty = true;
     ShadeMode m_shade_mode{ ShadeMode::Transparent };
     GLfloat m_line_range[2];
     GLfloat m_line_granularity;
diff --git a/src/node_panel_layer.cpp b/src/node_panel_layer.cpp
index 2009327..c03f89d 100644
--- a/src/node_panel_layer.cpp
+++ b/src/node_panel_layer.cpp
@@ -111,7 +111,7 @@ Node* NodePanelLayer::clone_instantiate() const
 void NodePanelLayer::init()
 {
     init_template("tpl-panel-layers");
-    m_layers_container = find<NodeBorder>("layers-container");
+    m_layers_container = find<NodeScroll>("layers-container");
     btn_add = find<NodeButtonCustom>("btn-add");
     btn_remove = find<NodeButtonCustom>("btn-remove");
     btn_up = find<NodeButtonCustom>("btn-up");
diff --git a/src/node_panel_layer.h b/src/node_panel_layer.h
index f057a31..652ee34 100644
--- a/src/node_panel_layer.h
+++ b/src/node_panel_layer.h
@@ -5,6 +5,7 @@
 #include "node_slider.h"
 #include "node_button_custom.h"
 #include "node_combobox.h"
+#include "node_scroll.h"
 
 class NodeLayer : public NodeBorder
 {
@@ -52,7 +53,7 @@ public:
     std::function<void(Node* target, int old_idx, int new_idx)> on_layer_order;
     NodeLayer* m_current_layer = nullptr;
     std::vector<NodeLayer*> m_layers;
-    NodeBorder* m_layers_container;
+    NodeScroll* m_layers_container;
     NodeSliderH* m_opacity;
     NodeCheckBox* m_alpha_lock;
     NodeComboBox* m_blend_mode;
diff --git a/src/node_scroll.cpp b/src/node_scroll.cpp
index aef12b1..9cdfa99 100644
--- a/src/node_scroll.cpp
+++ b/src/node_scroll.cpp
@@ -59,7 +59,7 @@ void NodeScroll::on_tick(float dt)
     auto rect = get_children_rect();
     // fix scrollbar
     float sz = m_size.y - (pad[0] + pad[2]);
-    float new_pad = rect.w == 0 || rect.w <= sz ? 5 : 35;
+    float new_pad = rect.w == 0 || rect.w <= sz + 2 ? 5 : 35;
     if (pad[1] != new_pad)
     {
         YGNodeStyleSetPadding(y_node, YGEdgeRight, new_pad);