From 97f8f1b89e82407bea129c46b2fd73a67ed58c41 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 22 Jan 2021 11:37:11 +0100
Subject: [PATCH 1/3] Switch from floating windows and clearfix to flex and
 justify-content: space-between

---
 qt/aqt/data/web/css/editor.scss |  6 +++++-
 qt/aqt/editor.py                | 12 +++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/qt/aqt/data/web/css/editor.scss b/qt/aqt/data/web/css/editor.scss
index dc65c3e6a..11bf745dc 100644
--- a/qt/aqt/data/web/css/editor.scss
+++ b/qt/aqt/data/web/css/editor.scss
@@ -33,7 +33,11 @@ body {
     margin: 0;
 }
 
-#topbutsOuter {
+#topbuts {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
     position: sticky;
     top: 0;
     left: 0;
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 3abe0ca70..c7d9e54b0 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -72,13 +72,11 @@ audio = (
 _html = """
 <style>
 html { background: %s; }
-#topbutsOuter { background: %s; }
+#topbuts { background: %s; }
 </style>
 <div>
-    <div id="topbutsOuter">
-        <div id="topbuts" class="clearfix">
-    %s
-        </div>
+    <div id="topbuts">
+        %s
     </div>
     <div id="fields">
     </div>
@@ -206,10 +204,10 @@ class Editor:
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
         topbuts = """
-            <div id="topbutsleft" style="float:left;">
+            <div id="topbutsleft">
                 %(leftbts)s
             </div>
-            <div id="topbutsright" style="float:right;">
+            <div id="topbutsright">
                 %(rightbts)s
             </div>
         """ % dict(

From 9226d5018533c5215637c25a154b6d6452ac54bf Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 22 Jan 2021 12:14:20 +0100
Subject: [PATCH 2/3] Space items by using margins instead of spaces

* also changed name of topbutton container back to topbutsOuter as it is clearer
* starting with Chromium 83, `row-gap` would be better suited for this
---
 qt/aqt/data/web/css/editor.scss | 14 +++++++++++++-
 qt/aqt/editor.py                | 10 +++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/qt/aqt/data/web/css/editor.scss b/qt/aqt/data/web/css/editor.scss
index 11bf745dc..e1aa8cd6d 100644
--- a/qt/aqt/data/web/css/editor.scss
+++ b/qt/aqt/data/web/css/editor.scss
@@ -33,7 +33,7 @@ body {
     margin: 0;
 }
 
-#topbuts {
+#topbutsOuter {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -44,6 +44,18 @@ body {
     padding: 2px;
 }
 
+.topbuts > button {
+    margin: 0 1px;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
 .topbut {
     width: 16px;
     height: 16px;
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index c7d9e54b0..babd4f24a 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -72,10 +72,10 @@ audio = (
 _html = """
 <style>
 html { background: %s; }
-#topbuts { background: %s; }
+#topbutsOuter { background: %s; }
 </style>
 <div>
-    <div id="topbuts">
+    <div id="topbutsOuter">
         %s
     </div>
     <div id="fields">
@@ -204,10 +204,10 @@ class Editor:
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
         topbuts = """
-            <div id="topbutsleft">
+            <div id="topbutsleft" class="topbuts">
                 %(leftbts)s
             </div>
-            <div id="topbutsright">
+            <div id="topbutsright" class="topbuts">
                 %(rightbts)s
             </div>
         """ % dict(
@@ -328,7 +328,7 @@ class Editor:
             class_ = ""
         if not disables:
             class_ += " perm"
-        return """ <button tabindex=-1
+        return """<button tabindex=-1
                         {id}
                         class="{class_}"
                         type="button"

From 1df6c5f59629d09c07cecdc8c6b58d853dcf29e2 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 22 Jan 2021 12:25:23 +0100
Subject: [PATCH 3/3] Avoid highlighting of toprightbuttons to shift the topbar

---
 qt/aqt/data/web/css/editor.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/qt/aqt/data/web/css/editor.scss b/qt/aqt/data/web/css/editor.scss
index e1aa8cd6d..c24c15275 100644
--- a/qt/aqt/data/web/css/editor.scss
+++ b/qt/aqt/data/web/css/editor.scss
@@ -44,7 +44,7 @@ body {
     padding: 2px;
 }
 
-.topbuts > button {
+.topbuts > * {
     margin: 0 1px;
 
     &:first-child {
@@ -75,6 +75,7 @@ body {
 
 button.linkb {
     -webkit-appearance: none;
+    margin-bottom: -3px;
     border: 0;
     box-shadow: none;
     padding: 0px 2px;
@@ -95,12 +96,12 @@ button:focus {
 }
 
 button.highlighted {
-    .nightMode #topbutsleft & {
-        background: linear-gradient(0deg, #333333 0%, #434343 100%);
-    }
-
     #topbutsleft & {
         background-color: lightgrey;
+
+        .nightMode & {
+            background: linear-gradient(0deg, #333333 0%, #434343 100%);
+        }
     }
 
     #topbutsright & {