From ddf3269bd089a03d2e6da8e94c63261726485ae4 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Sun, 15 Aug 2021 01:50:19 +0200
Subject: [PATCH] fix sidepanel with grid css

---
 .../integration/unit/utilities-performance.js |   2 +-
 src/editor/EditorStartup.js                   |   6 +-
 src/editor/Rulers.js                          |  12 +-
 src/editor/components/seButton.js             |   2 +-
 src/editor/components/seDropdown.js           |   2 +-
 src/editor/components/seExplorerButton.js     |   2 +-
 src/editor/components/seInput.js              |   2 +-
 src/editor/components/seSpinInput.js          |   2 +-
 .../ext-overview_window.js                    |  17 +-
 src/editor/locale/lang.af.js                  |   2 +-
 src/editor/locale/lang.ar.js                  |   2 +-
 src/editor/locale/lang.az.js                  |   2 +-
 src/editor/locale/lang.be.js                  |   2 +-
 src/editor/locale/lang.bg.js                  |   2 +-
 src/editor/locale/lang.ca.js                  |   2 +-
 src/editor/locale/lang.cs.js                  |   2 +-
 src/editor/locale/lang.cy.js                  |   2 +-
 src/editor/locale/lang.da.js                  |   2 +-
 src/editor/locale/lang.de.js                  |   2 +-
 src/editor/locale/lang.el.js                  |   2 +-
 src/editor/locale/lang.en.js                  |   3 +-
 src/editor/locale/lang.es.js                  |   2 +-
 src/editor/locale/lang.et.js                  |   2 +-
 src/editor/locale/lang.fa.js                  |   2 +-
 src/editor/locale/lang.fi.js                  |   2 +-
 src/editor/locale/lang.fr.js                  |   2 +-
 src/editor/locale/lang.fy.js                  |   2 +-
 src/editor/locale/lang.ga.js                  |   2 +-
 src/editor/locale/lang.gl.js                  |   2 +-
 src/editor/locale/lang.he.js                  |   2 +-
 src/editor/locale/lang.hi.js                  |   2 +-
 src/editor/locale/lang.hr.js                  |   2 +-
 src/editor/locale/lang.hu.js                  |   2 +-
 src/editor/locale/lang.hy.js                  |   2 +-
 src/editor/locale/lang.id.js                  |   2 +-
 src/editor/locale/lang.is.js                  |   2 +-
 src/editor/locale/lang.it.js                  |   2 +-
 src/editor/locale/lang.ja.js                  |   2 +-
 src/editor/locale/lang.ko.js                  |   2 +-
 src/editor/locale/lang.lt.js                  |   2 +-
 src/editor/locale/lang.lv.js                  |   2 +-
 src/editor/locale/lang.mk.js                  |   2 +-
 src/editor/locale/lang.ms.js                  |   2 +-
 src/editor/locale/lang.mt.js                  |   2 +-
 src/editor/locale/lang.nl.js                  |   2 +-
 src/editor/locale/lang.no.js                  |   2 +-
 src/editor/locale/lang.pl.js                  |   2 +-
 src/editor/locale/lang.pt-BR.js               |   2 +-
 src/editor/locale/lang.pt-PT.js               |   2 +-
 src/editor/locale/lang.ro.js                  |   2 +-
 src/editor/locale/lang.ru.js                  |   2 +-
 src/editor/locale/lang.sk.js                  |   2 +-
 src/editor/locale/lang.sl.js                  |   2 +-
 src/editor/locale/lang.sq.js                  |   2 +-
 src/editor/locale/lang.sr.js                  |   2 +-
 src/editor/locale/lang.sv.js                  |   2 +-
 src/editor/locale/lang.sw.js                  |   2 +-
 src/editor/locale/lang.test.js                |   2 +-
 src/editor/locale/lang.th.js                  |   2 +-
 src/editor/locale/lang.tl.js                  |   2 +-
 src/editor/locale/lang.tr.js                  |   2 +-
 src/editor/locale/lang.uk.js                  |   2 +-
 src/editor/locale/lang.vi.js                  |   2 +-
 src/editor/locale/lang.yi.js                  |   2 +-
 src/editor/locale/lang.zh-CN.js               |   2 +-
 src/editor/locale/lang.zh-HK.js               |   2 +-
 src/editor/locale/lang.zh-TW.js               |   2 +-
 src/editor/panels/BottomPanel.js              |   6 +-
 src/editor/panels/LayersPanel.js              | 157 ++++--------------
 src/editor/svgedit.css                        |  98 +++++------
 70 files changed, 161 insertions(+), 264 deletions(-)

diff --git a/cypress/integration/unit/utilities-performance.js b/cypress/integration/unit/utilities-performance.js
index c5cb0805..bc368a40 100644
--- a/cypress/integration/unit/utilities-performance.js
+++ b/cypress/integration/unit/utilities-performance.js
@@ -28,7 +28,7 @@ describe('utilities performance', function () {
       <div id="workarea" style="cursor: auto; overflow: scroll; line-height: 12px; right: 100px;">
 
         <!-- Must include this thumbnail view to see some of the performance issues -->
-        <svg id="overviewMiniView" width="150" height="112.5" x="0" y="0" viewBox="100 100 1000 1000" style="float: right;"
+        <svg id="overviewMiniView" width="132" height="112.5" x="0" y="0" viewBox="100 100 1000 1000" style="float: right;"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
           <use x="0" y="0" xlink:href="#svgroot"></use>
         </svg>
diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index 1bfec253..3257a32b 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -290,7 +290,7 @@ class EditorStartup {
       if (evt.type === 'mouseup') { panning = false; }
       return false;
     });
-    $id('svgcanvas').addEventListener('mousemove', function(evt) {
+    $id('svgcanvas').addEventListener('mousemove', (evt) => {
       if (panning === false) { return true; }
 
       this.workarea.scrollLeft -= (evt.clientX - lastX);
@@ -302,7 +302,7 @@ class EditorStartup {
       if (evt.type === 'mouseup') { panning = false; }
       return false;
     });
-    $id('svgcanvas').addEventListener('mousedown', function(evt) {
+    $id('svgcanvas').addEventListener('mousedown', (evt) => {
       if (evt.button === 1 || keypan === true) {
         panning = true;
         lastX = evt.clientX;
@@ -312,7 +312,7 @@ class EditorStartup {
       return true;
     });
 
-    window.addEventListener('mouseup', function() {
+    window.addEventListener('mouseup', () => {
       panning = false;
     });
 
diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js
index 0971e89c..f25aa72b 100644
--- a/src/editor/Rulers.js
+++ b/src/editor/Rulers.js
@@ -25,9 +25,15 @@ class Rulers {
     this.rulerCorner = $id('ruler_corner');
   }
   display (on) {
-    this.rulerX.style.display = on ? 'block' : 'none';
-    this.rulerY.style.display = on ? 'block': 'none';
-    this.rulerCorner.style.display = on ? 'block': 'none';
+    if (on) {
+      this.rulerX.style.removeProperty('display');
+      this.rulerY.style.removeProperty('display');
+      this.rulerCorner.style.removeProperty('display');
+    } else {
+      this.rulerX.style.display = 'none';
+      this.rulerY.style.display = 'none';
+      this.rulerCorner.style.display = 'none';
+    }
   }
   /**
    * @type {Module}
diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index 56ffbb4d..f6e5478a 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -36,7 +36,7 @@ template.innerHTML = `
   }
   </style>
   <div title="title">
-    <img src="logo.svg" alt="icon">
+    <img alt="icon">
   </div>
 `;
 /**
diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js
index d150b4e4..03fc8a75 100644
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -28,7 +28,7 @@ class Dropdown extends ListComboBox {
     const source = result.content.getElementById('source');
     // add a icon before our dropdown
     source.prepend(fragmentFrom.html`
-      <img src="logo.svg" alt="icon" width="18" height="18"></img>
+      <img src="dropdown.svg" alt="icon" width="18" height="18"></img>
       `.cloneNode(true));
     // change the style so it fits in our toolbar
     result.content.append(
diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index c3eb2f7f..0caf6d94 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -85,7 +85,7 @@ template.innerHTML = `
 
   <div class="overall">
     <div class="menu-button">
-      <img class="button-icon" src="logo.svg" alt="icon">
+      <img class="button-icon" src="explorer.svg" alt="icon">
       <div class="handle"></div>
     </div>
     <div class="image-lib"">
diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js
index 27bb57c4..4d386e5c 100644
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -26,7 +26,7 @@ template.innerHTML = `
   }
   </style>
   <div>
-  <img src="logo.svg" alt="icon" width="12" height="12" />
+  <img alt="icon" width="12" height="12" />
   <span id="label">label</span>
   <elix-input></elix-input>
   </div>
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 8e25fa95..3aa391de 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -39,7 +39,7 @@ template.innerHTML = `
   }
   </style>
   <div>
-  <img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" />
+  <img alt="icon" width="24" height="24" aria-labelledby="label" />
   <span id="label">label</span>
   <elix-number-spin-box min="1" step="1"></elix-number-spin-box>
   </div>
diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js
index 9d159d65..98ec88e0 100644
--- a/src/editor/extensions/ext-overview_window/ext-overview_window.js
+++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js
@@ -11,29 +11,20 @@ import { dragmove } from './dragmove/dragmove.js';
 
 export default {
   name: 'overview_window',
-  init ({ _$, isChrome }) {
+  init ({ _$ }) {
     const svgEditor = this;
     const { $id } = svgEditor.svgCanvas;
     const overviewWindowGlobals = {};
-    // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
-    // https://code.google.com/p/chromium/issues/detail?id=565120.
-    if (isChrome()) {
-      const verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
-      const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
-      if (chromeVersion < 49) {
-        return undefined;
-      }
-    }
 
     // Define and insert the base html element.
     const propsWindowHtml =
       '<div id="overview_window_content_pane" style="width:100%; ' +
         'word-wrap:break-word;  display:inline-block; margin-top:20px;">' +
         '<div id="overview_window_content" style="position:relative; ' +
-          'left:12px; top:0px;">' +
+          'left:15px; top:0px;">' +
           '<div style="background-color:#A0A0A0; display:inline-block; ' +
             'overflow:visible;">' +
-            '<svg id="overviewMiniView" width="150" height="100" x="0" ' +
+            '<svg id="overviewMiniView" width="132" height="100" x="0" ' +
               'y="0" viewBox="0 0 4800 3600" ' +
                 'xmlns="http://www.w3.org/2000/svg" ' +
                 'xmlns:xlink="http://www.w3.org/1999/xlink">' +
@@ -47,7 +38,7 @@ export default {
         '</div>' +
       '</div>';
     // eslint-disable-next-line no-unsanitized/method
-    $id("sidepanels").insertAdjacentHTML( 'beforeend', propsWindowHtml );
+    $id("sidepanel_content").insertAdjacentHTML( 'beforeend', propsWindowHtml );
 
     // Define dynamic animation of the view box.
     const updateViewBox = function () {
diff --git a/src/editor/locale/lang.af.js b/src/editor/locale/lang.af.js
index 26c74280..1027a18f 100644
--- a/src/editor/locale/lang.af.js
+++ b/src/editor/locale/lang.af.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klik om te verander vul kleur, verskuiwing klik om &#39;n beroerte kleur verander',
     zoom_level: 'Change zoom vlak',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ar.js b/src/editor/locale/lang.ar.js
index c7a0f420..3e2673cc 100644
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'انقر لتغيير لون التعبئة ، تحولا مزدوجا فوق لتغيير لون السكتة الدماغية',
     zoom_level: 'تغيير مستوى التكبير',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.az.js b/src/editor/locale/lang.az.js
index ff3d7f96..bc7bae51 100644
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click to change fill color, shift-click to change stroke color',
     zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.be.js b/src/editor/locale/lang.be.js
index c68fa730..071cf304 100644
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Націсніце для змены колеру залівання, Shift-Click змяніць обводка',
     zoom_level: 'Змяненне маштабу',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.bg.js b/src/editor/locale/lang.bg.js
index e597d556..783a2ee6 100644
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Кликнете, за да промени попълнете цвят, на смени, кликнете да променят цвета си удар',
     zoom_level: 'Промяна на ниво на мащабиране',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ca.js b/src/editor/locale/lang.ca.js
index 20b2a34a..ca3157c7 100644
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Feu clic per canviar el color de farciment, shift-clic per canviar el color del traç',
     zoom_level: 'Canviar el nivell de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.cs.js b/src/editor/locale/lang.cs.js
index 74d261de..6656a0fa 100644
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Zobrazit/schovat více možností',
     palette_info: 'Kliknutím změníte barvu výplně, kliknutím současně s klávesou shift změníte barvu čáry',
     zoom_level: 'Změna přiblížení',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.cy.js b/src/editor/locale/lang.cy.js
index 71286854..031a97ed 100644
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Cliciwch yma i lenwi newid lliw, sifft-cliciwch i newid lliw strôc',
     zoom_level: 'Newid lefel chwyddo',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.da.js b/src/editor/locale/lang.da.js
index 9189d0af..3bd6c198 100644
--- a/src/editor/locale/lang.da.js
+++ b/src/editor/locale/lang.da.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klik for at ændre fyldfarve, shift-klik for at ændre stregfarve',
     zoom_level: 'Skift zoomniveau',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.de.js b/src/editor/locale/lang.de.js
index 72396778..1e78ef56 100644
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Zeige/Verberge weitere Linien-Werkzeuge',
     palette_info: 'Klick zum Ändern der Füllfarbe, Shift-Klick zum Ändern der Linienfarbe',
     zoom_level: 'vergrößern',
-    panel_drag: 'Nach links/rechts ziehen, um die Größe vom Seitenpanel zu ändern',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.el.js b/src/editor/locale/lang.el.js
index e3183bc9..fa939618 100644
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Κάντε κλικ για να συμπληρώσετε την αλλαγή χρώματος, στροφή κλικ για να αλλάξετε το χρώμα εγκεφαλικό',
     zoom_level: 'Αλλαγή επίπεδο μεγέθυνσης',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js
index 8607575b..7d9ba8f3 100644
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -20,7 +20,8 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click to change fill color, shift-click to change stroke color',
     zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel: 'Panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.es.js b/src/editor/locale/lang.es.js
index 99c13915..7a65d9c5 100644
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Mostrar/ocultar herramientas de trazo adicionales',
     palette_info: 'Haga clic para cambiar el color de relleno. Pulse Mayús y haga clic para cambiar el color del contorno.',
     zoom_level: 'Cambiar el nivel de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.et.js b/src/editor/locale/lang.et.js
index 3d5c6c1d..5d10396b 100644
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click muuta täitke värvi, Shift-nuppu, et muuta insult värvi',
     zoom_level: 'Muuda suumi taset',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.fa.js b/src/editor/locale/lang.fa.js
index c456d3db..bb3cadb8 100644
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: '‫برای تغییر رنگ، کلیک کنید. برای تغییر رنگ لبه، کلید تبدیل (shift) را فشرده و کلیک کنید‬',
     zoom_level: '‫تغییر بزرگ نمایی‬',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.fi.js b/src/editor/locale/lang.fi.js
index 25ecff6b..168958f6 100644
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klikkaa muuttaa täyttöväri, Shift-click vaihtaa aivohalvauksen väriä',
     zoom_level: 'Muuta suurennustaso',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.fr.js b/src/editor/locale/lang.fr.js
index 7df5bcab..e29ca84f 100644
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: "Montrer/cacher plus d'outils de contour",
     palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour',
     zoom_level: 'Changer le niveau de zoom',
-    panel_drag: 'Tirer vers la gauche/droite pour redimensionner le panneau',
+    panel_action: 'Cliquer pour ouvrir le panel de côté',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.fy.js b/src/editor/locale/lang.fy.js
index a82592e3..ae0a903f 100644
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klik om de folkleur te feroarjen, shift-klik om de linekleur te feroarjen.',
     zoom_level: 'Yn-/útzoome',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ga.js b/src/editor/locale/lang.ga.js
index 5f874aec..f15eb4fe 100644
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Cliceáil chun athrú a líonadh dath, aistriú-cliceáil chun dath a athrú stróc',
     zoom_level: 'Athraigh súmáil leibhéal',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.gl.js b/src/editor/locale/lang.gl.js
index 98079f04..ee9134be 100644
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Preme aquí para cambiar a cor de recheo, Shift-clic para cambiar a cor do curso',
     zoom_level: 'Cambiar o nivel de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.he.js b/src/editor/locale/lang.he.js
index 9942eab7..bcfe4f62 100755
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'לחץ כדי לשנות צבע מילוי, לחץ על Shift-לשנות צבע שבץ',
     zoom_level: 'שינוי גודל תצוגה',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.hi.js b/src/editor/locale/lang.hi.js
index 5f594c07..056ecb18 100644
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'रंग बदलने पर क्लिक करें, बदलाव भरने के क्लिक करने के लिए स्ट्रोक का रंग बदलने के लिए',
     zoom_level: 'बदलें स्तर ज़ूम',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.hr.js b/src/editor/locale/lang.hr.js
index 4863869a..f3c2850c 100644
--- a/src/editor/locale/lang.hr.js
+++ b/src/editor/locale/lang.hr.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Kliknite promijeniti boju ispune, shift-click to promijeniti boju moždanog udara',
     zoom_level: 'Promjena razine zumiranja',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.hu.js b/src/editor/locale/lang.hu.js
index 6b3df52c..a540bcb3 100644
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Kattints ide a változások töltse szín, shift-click változtatni stroke color',
     zoom_level: 'Change nagyítási',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.hy.js b/src/editor/locale/lang.hy.js
index fcf8f37f..bdebebb4 100644
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click to change fill color, shift-click to change stroke color',
     zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.id.js b/src/editor/locale/lang.id.js
index e3b1eceb..0d23baba 100644
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klik untuk mengubah warna mengisi, shift-klik untuk mengubah warna stroke',
     zoom_level: 'Mengubah tingkat pembesaran',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.is.js b/src/editor/locale/lang.is.js
index 7cfd44fa..ebe482a3 100644
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Smelltu hér til að breyta fylla lit, Shift-smelltu til að breyta högg lit',
     zoom_level: 'Breyta Stækkunarstig',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.it.js b/src/editor/locale/lang.it.js
index 13527b7c..b0c31bd9 100644
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Mostra/nascondi strumenti per il tratto',
     palette_info: 'Fare clic per cambiare il colore di riempimento, shift-click per cambiare colore del tratto',
     zoom_level: 'Cambia il livello di zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ja.js b/src/editor/locale/lang.ja.js
index ba20b09c..1d4ccf4b 100644
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'クリックで塗りの色を選択、Shift+クリックで線の色を選択',
     zoom_level: 'ズーム倍率の変更',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ko.js b/src/editor/locale/lang.ko.js
index b0772cef..5200387c 100644
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: '색상을 클릭, 근무 시간 채우기 스트로크 색상을 변경하려면 변경하려면',
     zoom_level: '변경 수준으로 확대',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.lt.js b/src/editor/locale/lang.lt.js
index 2ff0d2a2..11e4d980 100644
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Spustelėkite norėdami keisti užpildo spalvą, perėjimo spustelėkite pakeisti insultas spalva',
     zoom_level: 'Keisti mastelį',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.lv.js b/src/editor/locale/lang.lv.js
index 734b906a..79c6b845 100644
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Noklikšķiniet, lai mainītu aizpildījuma krāsu, shift-click to mainīt stroke krāsa',
     zoom_level: 'Pārmaiņu mērogu',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.mk.js b/src/editor/locale/lang.mk.js
index 08d4f1cf..7de7cee2 100644
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Кликни за да внесете промени бојата, промена клик да се промени бојата удар',
     zoom_level: 'Промена зум ниво',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ms.js b/src/editor/locale/lang.ms.js
index 2a2a788a..d4d6c64d 100644
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klik untuk menukar warna mengisi, shift-klik untuk menukar warna stroke',
     zoom_level: 'Mengubah peringkat pembesaran',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.mt.js b/src/editor/locale/lang.mt.js
index 8338d49e..4f50c796 100644
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Ikklikkja biex timla l-bidla fil-kulur, ikklikkja-bidla għall-bidla color stroke',
     zoom_level: 'Bidla zoom livell',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.nl.js b/src/editor/locale/lang.nl.js
index 013d5b47..a489168e 100644
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Toon/verberg meer lijn gereedschap',
     palette_info: 'Klik om de vul kleur te veranderen, shift-klik om de lijn kleur te veranderen',
     zoom_level: 'In-/uitzoomen',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.no.js b/src/editor/locale/lang.no.js
index 13d03883..4315dafb 100644
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click å endre fyllfarge, shift-klikke for å endre slag farge',
     zoom_level: 'Endre zoomnivå',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.pl.js b/src/editor/locale/lang.pl.js
index 8ba0107e..98c3ffae 100644
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@@ -21,7 +21,7 @@ export default {
     toggle_stroke_tools: 'Pokaż/ukryj więcej opcji obramowania',
     palette_info: 'Kliknij aby zmienić kolor wypełnienia, przytrzymaj shift aby zmienić kolor obramowania',
     zoom_level: 'Zmiana powiększenia',
-    panel_drag: 'Przeciągnij w lewo/prawo aby zmienić szerokość panelu',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.pt-BR.js b/src/editor/locale/lang.pt-BR.js
index 675a8f0f..a1ac8852 100644
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Mais opções de traço',
     palette_info: 'Click para mudar a cor de preenchimento, shift-click para mudar a cor do traço',
     zoom_level: 'Mudar zoom',
-    panel_drag: 'Arraste para redimensionar o painel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.pt-PT.js b/src/editor/locale/lang.pt-PT.js
index 643088a2..1f8e3a3a 100644
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Clique para mudar a cor de preenchimento, shift-clique para mudar a cor do curso',
     zoom_level: 'Alterar o nível de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ro.js b/src/editor/locale/lang.ro.js
index e92922c1..91d8236c 100644
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Arătaţi/ascundeţi mai multe unelte de contur',
     palette_info: 'Faceţi clic pentru a schimba culoarea de umplere, Shift-clic pentru a schimba culoarea de contur',
     zoom_level: 'Schimbarea nivelului de zoom',
-    panel_drag: 'Trageţi la stanga/dreapta pentru redimensionare panou lateral',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.ru.js b/src/editor/locale/lang.ru.js
index 134f6cc7..c0c1eb2a 100644
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Показать/скрыть инструменты обводки',
     palette_info: 'Нажмите для изменения цвета заливки, Shift-Click изменить цвета обводки',
     zoom_level: 'Изменить масштаб',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Качество:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.sk.js b/src/editor/locale/lang.sk.js
index 077ac4d2..903a2f8e 100644
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Skryť/ukázať viac nástrojov pre krivku',
     palette_info: 'Kliknutím zmeníte farbu výplne, so Shiftom zmeníte farbu obrysu',
     zoom_level: 'Zmena priblíženia',
-    panel_drag: 'Potiahnutie vľavo/vpravo na zmenu veľkosti bočného panela',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.sl.js b/src/editor/locale/lang.sl.js
index 87c37f51..72171ae0 100644
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Pokaži/skrij več orodij za oris',
     palette_info: 'Kliknite, če želite spremeniti barvo polnila, kliknite+Shift, če želite spremeniti barvo orisa',
     zoom_level: 'Povečava',
-    panel_drag: 'Povlecite levo/desno za ogled stranske vrstice',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.sq.js b/src/editor/locale/lang.sq.js
index e319a02a..663b458b 100644
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klikoni për të ndryshuar mbushur me ngjyra, shift-klikoni për të ndryshuar ngjyrën pash',
     zoom_level: 'Ndryshimi zoom nivel',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.sr.js b/src/editor/locale/lang.sr.js
index 9a8eac77..1685384b 100644
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Кликните да бисте променили боју попуне, Схифт-кликните да промените боју удар',
     zoom_level: 'Промените ниво зумирања',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.sv.js b/src/editor/locale/lang.sv.js
index a17db58e..a370367e 100644
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Klicka för att ändra fyllningsfärg, shift-klicka för att ändra färgar',
     zoom_level: 'Ändra zoomnivå',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.sw.js b/src/editor/locale/lang.sw.js
index a58f7d26..12dc3c5d 100644
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click kubadili kujaza color, skiftarbete-click kubadili kiharusi color',
     zoom_level: 'Change zoom ngazi',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.test.js b/src/editor/locale/lang.test.js
index 7c3c2697..fa606987 100644
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Click to change fill color, shift-click to change stroke color',
     zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.th.js b/src/editor/locale/lang.th.js
index 8a203808..48f5c859 100644
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'คลิกเพื่อเปลี่ยนใส่สีกะคลิกเปลี่ยนสีจังหวะ',
     zoom_level: 'เปลี่ยนระดับการซูม',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.tl.js b/src/editor/locale/lang.tl.js
index 0e09fbba..7a026afc 100644
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'I-click upang baguhin ang punan ang kulay, paglilipat-click upang baguhin ang paghampas ng kulay',
     zoom_level: 'Baguhin ang antas ng zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.tr.js b/src/editor/locale/lang.tr.js
index c703aafa..a1643c3e 100644
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Tıklatın renk, vardiya dolgu zamanlı rengini değiştirmek için tıklayın değiştirmek için',
     zoom_level: 'Yakınlaştırma düzeyini değiştirebilirsiniz',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.uk.js b/src/editor/locale/lang.uk.js
index e20ee914..378a4105 100644
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Натисніть для зміни кольору заливки, Shift-Click змінити обвід',
     zoom_level: 'Зміна масштабу',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.vi.js b/src/editor/locale/lang.vi.js
index 8eebdf8f..16aca1a6 100644
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'Nhấn vào đây để thay đổi đầy màu sắc, thay đổi nhấp chuột để thay đổi màu sắc đột quỵ',
     zoom_level: 'Thay đổi mức độ phóng',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.yi.js b/src/editor/locale/lang.yi.js
index 7b871d9a..5c207466 100644
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: 'גיט צו ענדערן אָנעסן קאָליר, יבעררוק-גיט צו טוישן מאַך קאָליר',
     zoom_level: 'ענדערן פארגרעסער הייך',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.zh-CN.js b/src/editor/locale/lang.zh-CN.js
index eee150b5..ce0c0077 100644
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: '显示/隐藏更式边线工具',
     palette_info: '点击更改填充颜色，按住Shift键单击更改线条颜色',
     zoom_level: '更改缩放级别',
-    panel_drag: '左右拖拽调整面板大小',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.zh-HK.js b/src/editor/locale/lang.zh-HK.js
index a5103227..93a7a189 100644
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: '点击更改填充颜色，按住Shift键单击更改颜色中风',
     zoom_level: '更改缩放级别',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/locale/lang.zh-TW.js b/src/editor/locale/lang.zh-TW.js
index da6ea554..5c67e718 100644
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@@ -20,7 +20,7 @@ export default {
     toggle_stroke_tools: 'Show/hide more stroke tools',
     palette_info: '點擊更改填充顏色，按住Shift鍵單擊更改線條顏色',
     zoom_level: '更改縮放級別',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
     quality: 'Quality:',
     pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
     pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 2137ec5c..4fd14c87 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -186,14 +186,14 @@ class BottomPanel {
         <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
         </se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
-        <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="24px">
+        <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
           <se-list-item value="none">&#8212;</se-list-item>
           <se-list-item value="2,2">...</se-list-item>
           <se-list-item value="5,5">- -</se-list-item>
           <se-list-item value="5,2,2,2">- .</se-list-item>
           <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
         </se-list>
-        <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="24px">
+        <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px">
           <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
               height="22px"></img></se-list-item>
           <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
@@ -201,7 +201,7 @@ class BottomPanel {
           <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
               height="22px"></img></se-list-item>
         </se-list>
-        <se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="24px">
+        <se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="22px">
           <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
               height="22px"></img></se-list-item>
           <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 5dc8c259..04c59820 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -1,9 +1,6 @@
-/* eslint-disable max-len */
 /* eslint-disable no-alert */
 import SvgCanvas from "../../svgcanvas/svgcanvas.js";
 
-const SIDEPANEL_MAXWIDTH = 300;
-const SIDEPANEL_OPENWIDTH = 150;
 const { $id } = SvgCanvas;
 
 /**
@@ -15,76 +12,9 @@ class LayersPanel {
    */
   constructor(editor) {
     this.updateContextPanel = editor.topPanel.updateContextPanel;
-    this.sidedrag = -1;
-    this.sidedragging = false;
-    this.allowmove = false;
     this.editor = editor;
   }
 
-  /**
-   * @param {Float} delta
-   * @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
-   * @returns {void}
-   */
-  changeSidePanelWidth(delta) {
-    const rulerX = document.querySelector("#ruler_x");
-    $id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
-    $id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
-    rulerX.style.right =
-      parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
-      delta +
-      "px";
-    this.editor.workarea.style.right =
-      parseFloat(
-        getComputedStyle(this.editor.workarea, null).right.replace("px", "")
-      ) +
-      delta +
-      "px";
-    this.editor.svgCanvas.runExtensions("workareaResized");
-  }
-
-  /**
-   * @param {Event} evt
-   * @returns {void}
-   */
-  resizeSidePanel(evt) {
-    if (!this.allowmove) {
-      return;
-    }
-    if (this.sidedrag === -1) {
-      return;
-    }
-    this.sidedragging = true;
-    let deltaX = this.sidedrag - evt.pageX;
-    const sideWidth = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
-    if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
-      deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
-      // sideWidth = SIDEPANEL_MAXWIDTH;
-    } else if (sideWidth + deltaX < 2) {
-      deltaX = 2 - sideWidth;
-      // sideWidth = 2;
-    }
-    if (deltaX === 0) {
-      return;
-    }
-    this.sidedrag -= deltaX;
-    this.changeSidePanelWidth(deltaX);
-  }
-
-  /**
-   * If width is non-zero, then fully close it; otherwise fully open it.
-   * @param {boolean} close Forces the side panel closed
-   * @returns {void}
-   */
-  toggleSidePanel(close) {
-    const dpr = window.devicePixelRatio || 1;
-    const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
-    const isOpened = (dpr < 1 ? w : w / dpr) > 2;
-    const zoomAdjustedSidepanelWidth =
-      (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
-    const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
-    this.changeSidePanelWidth(deltaX);
-  }
   /**
    * @param {PlainObject} e event
    * @returns {void}
@@ -119,30 +49,31 @@ class LayersPanel {
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
     <div id="sidepanels">
-    <div id="layerpanel">
-      <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
-      <fieldset id="layerbuttons">
-        <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
-        <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
-        <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
-        <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
-        <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
-        <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
-        </se-button>
-      </fieldset>
-      <table id="layerlist">
-        <tr class="layer">
-          <td class="layervis"></td>
-          <td class="layername">Layer 1</td>
-        </tr>
-      </table>
-      <span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
-      <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
-        <option selected="selected" value="layer1">Layer 1</option>
-      </select>
-    </div>
-    <div id="sidepanel_handle" title="${i18next.t('ui.panel_drag')}">L a y e r s
-    </div>
+      <div id="sidepanel_handle" title="${i18next.t('ui.panel_action')}">${i18next.t('ui.panel')}</div>
+      <div id="sidepanel_content">
+        <div id="layerpanel">
+          <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
+          <fieldset id="layerbuttons">
+            <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
+            <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
+            <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
+            <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
+            <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
+            <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
+            </se-button>
+          </fieldset>
+          <table id="layerlist">
+            <tr class="layer">
+              <td class="layervis"></td>
+              <td class="layername">Layer 1</td>
+            </tr>
+          </table>
+          <span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
+          <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
+            <option selected="selected" value="layer1">Layer 1</option>
+          </select>
+        </div>
+     </div>
   </div>
     `;
     this.editor.$svgEditor.append(template.content.cloneNode(true));
@@ -182,36 +113,18 @@ class LayersPanel {
       this.lmenuFunc(e);
     });
     $id("sidepanel_handle").addEventListener(
-      "click",
-      this.toggleSidePanel.bind(this)
+      "click", () => this.toggleSidePanel()
     );
-    if (this.editor.configObj.curConfig.showlayers) {
-      this.toggleSidePanel();
+    this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
+  }
+  toggleSidePanel(displayFlag) {
+    if (displayFlag === undefined) {
+      this.editor.$svgEditor.classList.toggle('open');
+    } else if (displayFlag) {
+      this.editor.$svgEditor.classList.add('open');
+    } else {
+      this.editor.$svgEditor.classList.remove('open');
     }
-    $id("sidepanel_handle").addEventListener("mousedown", (evt) => {
-      this.sidedrag = evt.pageX;
-      window.addEventListener("mousemove", this.resizeSidePanel.bind(this));
-      this.allowmove = false;
-      // Silly hack for Chrome, which always runs mousemove right after mousedown
-      setTimeout(() => {
-        this.allowmove = true;
-      }, 20);
-    });
-    $id("sidepanel_handle").addEventListener("mouseup", (_evt) => {
-      if (!this.sidedragging) {
-        this.toggleSidePanel();
-      }
-      this.sidedrag = -1;
-      this.sidedragging = false;
-    });
-    window.addEventListener("mouseup", (_evt) => {
-      this.sidedrag = -1;
-      this.sidedragging = false;
-      this.editor.$svgEditor.removeEventListener(
-        "mousemove",
-        this.resizeSidePanel.bind(this)
-      );
-    });
   }
   /**
    * @returns {void}
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 4d9736d9..348c2a31 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -17,7 +17,7 @@
 .svg_editor {
   display: grid;
   grid-template-rows: auto 15px 1fr 40px;
-  grid-template-columns: 34px 15px 1fr 10px;
+  grid-template-columns: 34px 15px 1fr 15px;
   grid-template-areas: 
     "top   top    top    top"
     "left  corner rulerX side"
@@ -32,12 +32,17 @@
   height: 100%;
 }
 
+.svg_editor.open {
+  grid-template-columns: 34px 15px 1fr 150px;
+}
+
 /* on smaller screen, allow 2 lines for the toolbar */
+
 @media screen and (max-width:1250px) {
   .svg_editor {
     grid-template-rows: minmax(80px, auto) 15px 1fr 40px;
   }
-} 
+}
 
 #svgroot {
   user-select: none;
@@ -60,7 +65,24 @@
   background: var(--canvas-bg-color);
   text-align: center;
   vertical-align: middle;
-  position:relative;
+  position: relative;
+}
+
+#sidepanels {
+  grid-area: side;
+}
+
+#sidepanel_handle {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  color: white;
+  position: absolute;
+  cursor: pointer;
+  top:50%;
+}
+
+.svg_editor:not(.open) #sidepanel_content {
+  display: none;
 }
 
 a {
@@ -77,53 +99,13 @@ hr {
   padding-top: 4px;
 }
 
-#sidepanels {
-  display: inline-block;
-  position: absolute;
-  top: 40px;
-  bottom: 40px;
-  right: 0;
-  width: 2px;
-  padding: 10px;
-  border-color: var(--border-color);
-  border-style: solid;
-  border-width: 1px;
-  border-left: none;
-  overflow-x: hidden;
-  overflow-y: visible;
+#layersLabel {
+  color: white;
 }
 
 #layerpanel {
-  display: inline-block;
-  position: relative;
-  top: 0px;
-  bottom: 0;
-  left: 12px;
-  width: 0;
-  overflow: hidden;
-  margin: 0;
-  user-select: none;
-}
-
-#sidepanel_handle {
-  display: inline-block;
-  position: absolute;
-  background-color: --main-bg-color;
-  color: #fff;
-  font-weight: 100;
-  left: 0;
-  top: 40%;
-  width: 1em;
-  padding: 5px 5px 5px 5px;
-  margin-left: 6px;
-  cursor: pointer;
-  border-radius: 5px;
-  user-select: none;
-}
-
-#sidepanel_handle * {
-  cursor: pointer;
   user-select: none;
+  padding-left: 15px;
 }
 
 #layerbuttons {
@@ -133,10 +115,7 @@ hr {
   padding-right: 2px;
   width: 125px;
   height: 20px;
-  border-right: 1px solid #FFFFFF;
-  border-bottom: 1px solid #FFFFFF;
-  border-left: 1px solid var(--border-color);
-  border-top: 1px solid var(--border-color);
+  border: 0px;
   overflow: hidden;
   display: flex;
   justify-content: center;
@@ -146,7 +125,7 @@ hr {
 #layerlist {
   margin: 1px;
   padding: 0;
-  width: 127px;
+  width: 132px;
   border-collapse: collapse;
   border: 1px solid var(--border-color);
   background-color: #FFFFFF;
@@ -319,16 +298,18 @@ hr {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  /* leave space for the main menu */ 
+  /* leave space for the main menu */
   position: relative;
   background-color: var(--main-bg-color);
 }
-#tools_top > *{
-  display:flex;
+
+#tools_top>* {
+  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   background-color: var(--main-bg-color);
 }
+
 /*—————————————————————————————*/
 
 #tools_bottom {
@@ -338,6 +319,11 @@ hr {
   align-items: center;
 }
 
+#tools_bottom se-list {
+  margin-bottom: 8px;
+}
+
+
 /*—————————————————————————————*/
 
 #tools_left {
@@ -525,7 +511,7 @@ input[type=text] {
 }
 
 #palette {
-  margin-left:auto;
+  margin-left: auto;
 }
 
 #stroke_expand {
@@ -606,4 +592,4 @@ ul li.current {
 
 .dropdown li.tool_button {
   width: 24px;
-}
+}
\ No newline at end of file