From 69097ebb5046b193b5181817ec7f6a93de2d443d Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Fri, 3 Oct 2025 00:41:59 +0100
Subject: [PATCH] Fix: edit and more buttons not aligned

---
 .../reviewer-bottom/ReviewerBottom.svelte     | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte b/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
index 1e2626fa6..34e3e8a2a 100644
--- a/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
+++ b/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
@@ -15,11 +15,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let remainingIndex: Writable<number>;
 
     $: console.log($remaining);
+    $: answerShown = $answerButtons.length;
 </script>
 
 <div id="outer" class="fancy">
-    <div id="tableinner">
-        <div class="edit">
+    <div id="tableinner" style="--answer-button-count: {$answerButtons.length || 1}">
+        <span class="disappearing"></span>
+        <div class="disappearing edit">
             <button
                 title={tr.actionsShortcutKey({ val: "E" })}
                 on:click={() => bridgeCommand("edit")}
@@ -27,35 +29,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {tr.studyingEdit()}
             </button>
         </div>
-        <div class="review-buttons">
-            {#if $answerButtons.length}
-                {#each $answerButtons as answerButton}
-                    <AnswerButton info={answerButton}></AnswerButton>
-                {/each}
-            {:else}
-                <span class="remaining-count">
-                    <RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>
-                        {$remaining[0]}
-                    </RemainingNumber> +
-                    <RemainingNumber
-                        cls="learn-count"
-                        underlined={$remainingIndex === 1}
-                    >
-                        {$remaining[1]}
-                    </RemainingNumber> +
-                    <RemainingNumber
-                        cls="review-count"
-                        underlined={$remainingIndex === 2}
-                    >
-                        {$remaining[2]}
-                    </RemainingNumber>
-                </span>
-                <button on:click={() => bridgeCommand("ans")}>
-                    {tr.studyingShowAnswer()}
-                </button>
-            {/if}
-        </div>
-        <div class="more">
+        {#if answerShown}
+            {#each $answerButtons as answerButton}
+                <AnswerButton info={answerButton}></AnswerButton>
+            {/each}
+        {:else}
+            <span class="remaining-count">
+                <RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>
+                    {$remaining[0]}
+                </RemainingNumber> +
+                <RemainingNumber cls="learn-count" underlined={$remainingIndex === 1}>
+                    {$remaining[1]}
+                </RemainingNumber> +
+                <RemainingNumber cls="review-count" underlined={$remainingIndex === 2}>
+                    {$remaining[2]}
+                </RemainingNumber>
+            </span>
+            <button on:click={() => bridgeCommand("ans")}>
+                {tr.studyingShowAnswer()}
+            </button>
+        {/if}
+        <span class="disappearing"></span>
+        <div class="disappearing more">
             <button
                 on:click={() => bridgeCommand("more")}
                 title={tr.actionsShortcutKey({ val: "M" })}
@@ -70,30 +65,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     #tableinner {
         width: 100%;
         display: grid;
-        grid-template-columns: auto 1fr auto;
+        grid-template-columns: 1fr repeat(var(--answer-button-count, 1), auto) 1fr;
+        grid-template-rows: auto auto;
         justify-content: space-between;
         justify-items: center;
         align-items: center;
-    }
-
-    .review-buttons {
-        display: grid;
         grid-auto-flow: column;
-        grid-template-rows: auto auto;
     }
 
     .remaining-count {
         text-align: center;
     }
 
+    .more,
+    .edit {
+        width: 100%;
+    }
+
+    .more {
+        text-align: right;
+    }
+
     @media (max-width: 583px) {
-        .edit,
-        .more {
+        .disappearing {
             display: none;
         }
 
         #tableinner {
-            grid-template-columns: 1fr;
+            grid-template-columns: repeat(var(--answer-button-count, 1), auto);
+            justify-content: center;
         }
     }
 </style>