From 2050ebf088785a35dde5d373ed89c3582c455a5c Mon Sep 17 00:00:00 2001
From: "Dustin C. Hatch" <dustin@hatch.name>
Date: Sat, 8 Mar 2025 20:12:20 -0600
Subject: [PATCH] ui: Move camera action buttons below image viewer

On mobile, the screen is too narrow to put the action buttons to the
right of the image viewer.
---
 js/transaction.css              |  5 -----
 templates/transaction.html.tera | 30 ++++++++++++------------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/js/transaction.css b/js/transaction.css
index 84f20b9..d125efd 100644
--- a/js/transaction.css
+++ b/js/transaction.css
@@ -3,11 +3,6 @@
 }
 
 #photo-view {
-  display: flex;
-}
-
-#photo-view .workspace {
-  flex-grow: 1;
   text-align: center;
 }
 
diff --git a/templates/transaction.html.tera b/templates/transaction.html.tera
index bd891dc..6b091e6 100644
--- a/templates/transaction.html.tera
+++ b/templates/transaction.html.tera
@@ -36,24 +36,18 @@
         <video class="invisible"></video>
       </div>
       <div class="buttons">
-        <div>
-          <sl-tooltip content="Take Photo" placement="left">
-            <sl-icon-button name="camera" label="Take Photo"></sl-icon-button>
-          </sl-tooltip>
-        </div>
-        <div>
-          <sl-tooltip content="Crop" placement="left">
-            <sl-icon-button name="crop" label="Crop"></sl-icon-button>
-          </sl-tooltip>
-        </div>
-        <div>
-          <sl-tooltip content="Start Over" placement="left">
-            <sl-icon-button
-              name="trash"
-              label="Start Over"
-            ></sl-icon-button>
-          </sl-tooltip>
-        </div>
+        <sl-tooltip content="Take Photo">
+          <sl-icon-button name="camera" label="Take Photo"></sl-icon-button>
+        </sl-tooltip>
+        <sl-tooltip content="Crop">
+          <sl-icon-button name="crop" label="Crop"></sl-icon-button>
+        </sl-tooltip>
+        <sl-tooltip content="Start Over">
+          <sl-icon-button
+            name="trash"
+            label="Start Over"
+          ></sl-icon-button>
+        </sl-tooltip>
       </div>
     </div>
   </sl-details>