WIP

src/ui/components/Controls.css

@@ -46,3 +46,40 @@
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
 }
+
+@media (orientation: portrait) {
+  .controls-box {
+    padding: 0;
+  }
+
+  .controls {
+    background: var(--color-bg-block);
+    padding: 1.5rem 0;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  .controls__button {
+    margin: 0.8vw;
+    padding: 0.5rem;
+    font-size: 3rem;
+    text-align: center;
+    width: 12.8vw;
+    height: 12.8vw;
+    border-radius: 5px;
+  }
+
+  .controls__button--next {
+    width: 23vw;
+  }
+
+  .flip__button {
+    margin: 0.8vw;
+    padding: 0.5rem;
+    font-size: 3rem;
+    text-align: center;
+    border-radius: 5px;
+    width: 12.8vw;
+    height: 12.8vw;
+  }
+}

src/ui/components/Controls.tsx

@@ -31,7 +31,7 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
         </Show>
       </button>
       <button
-        class="controls__button"
+        class="controls__button controls__button--next"
         onClick={props.handlers.next}
         title="NEXT"
       >