From ab68a0c4e81a755258f30c90464312dd72f60448 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Fri, 8 Dec 2023 08:37:44 -0700
Subject: [PATCH] Fix small screen button sizes

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/pages/detect.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 3dcc999..ea8911c 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -122,20 +122,22 @@
   .image-menu {
     grid-area: menu-view;
     margin: 5px;
-    width: 50%;
+    /*width: 90%;*/
     max-width: 400px;
     min-width: 192px;
-    flex: 0 0 auto;
   }
 
   .image-menu .button {
     aspect-ratio: 1;
     height: auto;
     padding: 5px;
+    flex: 1 1 0%;
   }
 
-  .button > img {
-    height: 100%;
+  .button > svg {
+    aspect-ratio: 1;
+    height: auto;
+    width: 100%;
   }
 
   @media (max-height: 450px) and (orientation: landscape) {
@@ -165,10 +167,10 @@
 
     .image-menu {
       flex-direction: column;
+      aspect-ratio: .25;
       width: auto;
       min-width: 0;
-      flex: 1 1 0%;
-      max-height: 100%;
+      height: 100%;
     }
 
     .image-menu .button {
@@ -177,9 +179,10 @@
       height: 100%;
       flex: 1 1 0%;
       border-bottom: 1px solid var(--f7-segmented-raised-divider-color);
+      border-bottom-left-radius: 0px !important;
     }
 
-    .button > img {
+    .button > svg {
       width:auto;
       height: 100%;
     }