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

@@ -3,11 +3,6 @@
 }
 
 #photo-view {
-  display: flex;
-}
-
-#photo-view .workspace {
-  flex-grow: 1;
   text-align: center;
 }
 

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>