Fix small screen button sizes (#37)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: Georgi_Lab/ALVINN_f7#37

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%;
     }