From 7617c277b05f2cc6cb981a3846382411d0205a98 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Fri, 9 Feb 2024 10:38:24 -0700
Subject: [PATCH] Fix sizing issues on Safari (#89)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/89
---
 src/pages/detect.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 4e171ca..0d5a219 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -6,7 +6,7 @@
     </f7-navbar>
     <f7-block class="detect-grid">
       <div class="image-container">
-        <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
+        <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
         <SvgIcon v-if="!imageView"  :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
       </div>
       <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -24,12 +24,12 @@
         <f7-preloader v-if="detecting" size="32" style="color: var(--avn-theme-color);" />
       </div>
       <div v-if="showDetectSettings" class="detect-inputs" style="grid-area: detect-settings;">
-        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
-        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
-        <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`">
+        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
+        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
+        <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`" style="flex: 0 1 20%">
           <SvgIcon icon="check_list"/>
         </f7-button>
-        <f7-button @click="setData">
+        <f7-button @click="setData" style="flex: 0 1 20%">
           <SvgIcon icon="refresh_search"/>
         </f7-button>
       </div>
@@ -112,8 +112,8 @@
 
   .image-container {
     grid-area: image-view;
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
+    height: 100%;
     min-width: 0;
     min-height: 0;
     position: relative;