From 8de405eb17e5559560afd0730f7dd7fe6f59dd95 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Thu, 12 Aug 2021 10:02:19 +0200
Subject: [PATCH] Update TopPanel.js

---
 src/editor/panels/TopPanel.js | 47 ++++++++++++++---------------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 942950d8..079213cc 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -151,11 +151,6 @@ class TopPanel {
    * @returns {void}
    */
   updateContextPanel() {
-    const setInputWidth = (elem) => {
-      const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
-      elem.style.width = w + 'px';
-    };
-
     let elem = this.editor.selectedElement;
     // If element has just been deleted, consider it null
     if (!isNullish(elem) && !elem.parentNode) {
@@ -371,7 +366,6 @@ class TopPanel {
           const title = this.editor.svgCanvas.getTitle();
           const label = $id("g_title");
           label.value = title;
-          setInputWidth(label);
           $id("g_title").disabled = (tagName === "use");
         }
       }
@@ -919,36 +913,31 @@ class TopPanel {
         </div> <!-- line_panel -->
         <div id="text_panel">
           <div class="toolset">
-          <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
-          <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
+            <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
+            <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
+            <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg"></se-button>
+            <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg"></se-button>
+            <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg"></se-button>
+            <se-list id="tool_font_family" label="Font:">
+              <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
+              <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
+              <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
+              <se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
+              <se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
+              <se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
+              <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
+              <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
+            </se-list>
+            <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
+              src="${imgPath}/fontsize.svg"></se-spin-input>
           </div>
-          <div class="toolset">
-          <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg">
-          </se-button>
-          <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg">
-          </se-button>
-          <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg">
-          </se-button>
-          </div>
-          <se-list id="tool_font_family" label="Font:">
-          <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
-          <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
-          <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
-          <se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
-          <se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
-          <se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
-          <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
-          <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
-          </se-list>
-          <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
-          src="${imgPath}/fontsize.svg"></se-spin-input>
           <!-- Not visible, but still used -->
           <input id="text" type="text" size="35" />
         </div> <!-- text_panel -->
         <!-- formerly gsvg_panel -->
         <div id="container_panel">
           <div class="tool_sep"></div>
-          <se-input id="g_title" data-attr="title" label="${i18next.t('ui.label')}"></se-input> 
+          <se-input id="g_title" data-attr="title" size="8" label="${i18next.t('label')}"></se-input> 
         </div> <!-- container_panel -->
         <div id="use_panel">
           <se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"