From 1478801e4af714a8a87716dbc3d9f9c347a97a11 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:18:21 +0100
Subject: [PATCH] Fix indicator positioning of Reviewer bottom toolbar (#2157)

* Prevent interval indicators from wrapping

* Move indicators inside and relative to their buttons

* Move due indicators into answer buttons
---
 qt/aqt/data/web/css/reviewer-bottom.scss | 11 +++++------
 qt/aqt/reviewer.py                       | 21 +++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index 9ae5068fc..58da3bbf9 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -31,6 +31,7 @@ button {
     min-width: 60px;
     white-space: nowrap;
     margin: 0.5em;
+    position: relative;
 }
 
 .hitem {
@@ -50,10 +51,6 @@ button {
     font-weight: normal;
 }
 
-.stattxt {
-    white-space: nowrap;
-}
-
 #ansbut {
     margin-bottom: 1em;
 }
@@ -65,9 +62,11 @@ button {
 .nobold,
 .stattxt {
     position: absolute;
-    top: -5px;
+    white-space: nowrap;
+    font-size: medium;
+    top: -3px;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -100%);
     font-weight: normal;
     display: inline-block;
 }
diff --git a/qt/aqt/reviewer.py b/qt/aqt/reviewer.py
index f239b94f7..8070ad4b8 100644
--- a/qt/aqt/reviewer.py
+++ b/qt/aqt/reviewer.py
@@ -662,13 +662,15 @@ class Reviewer:
 <center id=outer>
 <table id=innertable width=100%% cellspacing=0 cellpadding=0>
 <tr>
-<td align=left width=50 valign=top class=stat>
+<td align=left valign=top class=stat>
 <button title="%(editkey)s" onclick="pycmd('edit');">%(edit)s</button></td>
 <td align=center valign=top id=middle>
 </td>
-<td width=50 align=right valign=top class=stat><span id=time class=stattxt>
-</span>
-<button onclick="pycmd('more');">%(more)s %(downArrow)s</button>
+<td align=right valign=top class=stat>
+<button onclick="pycmd('more');">
+%(more)s %(downArrow)s
+<span id=time class=stattxt></span>
+</button>
 </td>
 </tr>
 </table>
@@ -687,11 +689,10 @@ time = %(time)d;
 
     def _showAnswerButton(self) -> None:
         middle = """
-<span class=stattxt>{}</span>
-<button title="{}" id="ansbut" onclick='pycmd("ans");'>{}</button>""".format(
-            self._remaining(),
+<button title="{}" id="ansbut" onclick='pycmd("ans");'>{}<span class=stattxt>{}</span></button>""".format(
             tr.actions_shortcut_key(val=tr.studying_space()),
             tr.studying_show_answer(),
+            self._remaining(),
         )
         # wrap it in a table so it has the same top margin as the ease buttons
         middle = (
@@ -781,14 +782,14 @@ time = %(time)d;
                 extra = ""
             due = self._buttonTime(i, v3_labels=labels)
             return """
-<td align=center>%s<button %s title="%s" data-ease="%s" onclick='pycmd("ease%d");'>\
-%s</button></td>""" % (
-                due,
+<td align=center><button %s title="%s" data-ease="%s" onclick='pycmd("ease%d");'>\
+%s%s</button></td>""" % (
                 extra,
                 tr.actions_shortcut_key(val=i),
                 i,
                 i,
                 label,
+                due,
             )
 
         buf = "<center><table cellpading=0 cellspacing=0><tr>"