From 792155260f43b1bada1d77460b81e12c42cd8490 Mon Sep 17 00:00:00 2001
From: Manuel Kasper <mk@neon1.net>
Date: Tue, 17 Aug 2021 10:12:59 +0200
Subject: [PATCH] Fix spot/alert screen usability on Firefox for iOS

---
 src/components/EditAlert.vue         | 5 ++++-
 src/components/EditSpot.vue          | 5 ++++-
 src/components/NearbySummitsList.vue | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/EditAlert.vue b/src/components/EditAlert.vue
index 408ce56..cb47d18 100644
--- a/src/components/EditAlert.vue
+++ b/src/components/EditAlert.vue
@@ -10,7 +10,7 @@
 
       <b-field label="Summit reference" :message="summitDisplay" :type="summitType" :class="summitLabelClass" expanded>
         <b-field>
-          <b-input type="text" ref="summitCode" v-model="summitCode" placeholder="XX/YY-000" :loading="summitLoading" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required />
+          <b-input type="text" class="summit-code" ref="summitCode" v-model="summitCode" placeholder="XX/YY-000" :loading="summitLoading" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required />
           <p class="control">
             <NearbySummitsList @summitSelected="onSummitSelected" />
           </p>
@@ -343,6 +343,9 @@ export default {
 .callsign >>> input {
   text-transform: uppercase;
 }
+.summit-code >>> input {
+  width: 10em;
+}
 @media (max-width: 1023px) {
   >>> .datepicker .dropdown.is-mobile-modal .dropdown-menu {
     width: calc(100vw - 40px);
diff --git a/src/components/EditSpot.vue b/src/components/EditSpot.vue
index 20a81e9..5230c75 100644
--- a/src/components/EditSpot.vue
+++ b/src/components/EditSpot.vue
@@ -10,7 +10,7 @@
 
       <b-field label="Summit reference" :message="summitDisplay" :type="summitType" :class="summitLabelClass" expanded>
         <b-field>
-          <b-input type="text" ref="summitCode" v-model="summitCode" placeholder="XX/YY-000" :loading="summitLoading" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required />
+          <b-input type="text" class="summit-code" ref="summitCode" v-model="summitCode" placeholder="XX/YY-000" :loading="summitLoading" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required />
           <p class="control">
             <NearbySummitsList @summitSelected="onSummitSelected" />
           </p>
@@ -251,6 +251,9 @@ export default {
 .callsign >>> input {
   text-transform: uppercase;
 }
+.summit-code >>> input {
+  width: 10em;
+}
 .invalid >>> .help {
   text-decoration: line-through;
 }
diff --git a/src/components/NearbySummitsList.vue b/src/components/NearbySummitsList.vue
index c65feb8..4edcc6b 100644
--- a/src/components/NearbySummitsList.vue
+++ b/src/components/NearbySummitsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-dropdown ref="dropdown" aria-role="list" position="is-bottom-left" class="nearby-summits">
+  <b-dropdown ref="dropdown" aria-role="list" position="is-bottom-left" class="nearby-summits" append-to-body>
     <b-button slot="trigger" icon-right="angle-down" :loading="loading" @click.stop="clickButton">Nearby</b-button>
     <b-dropdown-item v-for="summit in nearbySummits" :key="summit.code" aria-role="listitem" @click="clickSummit(summit)">
       <div class="summit-title"><div class="summit-name">{{ summit.name }}</div><div class="summit-alt"><AltitudeLabel :altitude="summit.altitude" /></div></div>