From b113cb31bd5d847ff3632f2bd5a87dab1476b75a Mon Sep 17 00:00:00 2001
From: gusthoff <gusthoff@gusthoff.com>
Date: Sun, 8 Sep 2024 06:09:44 +0200
Subject: [PATCH] Widget: moving settings bar to the top

Also, moving tabs to the bottom.
---
 frontend/sphinx/widget/templates/widget.html | 26 ++++++++++----------
 frontend/src/styles/learn.scss               |  3 ++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/sphinx/widget/templates/widget.html b/frontend/sphinx/widget/templates/widget.html
index f598e917b..8c91f62f2 100644
--- a/frontend/sphinx/widget/templates/widget.html
+++ b/frontend/sphinx/widget/templates/widget.html
@@ -11,19 +11,6 @@
     {% for f in w.files %}
         <div class="file" data-basename="{{ f.basename }}">{{ f.content }}</div>
     {% endfor %}
-    <div id="{{ w.id }}.tab" class="tab">
-        {% for t in w.files %}
-            <button id="{{ w.id }}.tab.{{ t.basename }}" class="tab-links">{{ t.basename }}</button>
-        {% endfor %}
-    </div>
-    <div id="{{ w.id }}.editors">
-        <div id="{{ w.id }}.editors.editor" class="editor-container"></div>
-        <div id="{{ w.id }}.editors.non-tabbed-editor" class="non-tabbed-editor-container" hidden>
-            {% for t in w.files %}
-                <div id="{{ w.id }}.editors.non-tabbed-editor.{{ t.basename }}" class="non-tabbed-links"></div>
-            {% endfor %}
-        </div>
-    </div>
     <div id="{{ w.id }}.settings-bar" class="settings-bar">
         <div class="dropdown-container settingsbar-item">
             <button class="dropdown-btn">
@@ -78,6 +65,19 @@
             Download
         </button>
     </div>
+    <div id="{{ w.id }}.editors">
+        <div id="{{ w.id }}.editors.editor" class="editor-container"></div>
+        <div id="{{ w.id }}.editors.non-tabbed-editor" class="non-tabbed-editor-container" hidden>
+            {% for t in w.files %}
+                <div id="{{ w.id }}.editors.non-tabbed-editor.{{ t.basename }}" class="non-tabbed-links"></div>
+            {% endfor %}
+        </div>
+    </div>
+    <div id="{{ w.id }}.tab" class="tab">
+        {% for t in w.files %}
+            <button id="{{ w.id }}.tab.{{ t.basename }}" class="tab-links">{{ t.basename }}</button>
+        {% endfor %}
+    </div>
     <div class="row output-row">
         <div id="{{ w.id }}.button-group" class="col-md-3 button-group">
             {% for b in w.button_group %}
diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss
index a84044124..9cca3e731 100644
--- a/frontend/src/styles/learn.scss
+++ b/frontend/src/styles/learn.scss
@@ -160,6 +160,8 @@ pre.widget {
     flex-wrap: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+    margin-bottom: 10px;
+
     button {
         background-color: inherit;
         float: left;
@@ -196,7 +198,6 @@ pre.widget {
     padding-left: 13px;
     display: block;
     margin-top: 0px;
-    margin-bottom: 10px;
 
     button {
         background-color: transparent;