From 78150b77e02dfbbd8fc54fbdde99e9e3446c6699 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 26 Feb 2021 16:21:23 +0100
Subject: [PATCH] Improve search form display

Closes #557

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Search.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index 6807b1870..6a3c2b044 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -31,7 +31,7 @@
               />
             </b-field>
             <b-field :label="$t('Radius')" label-for="radius">
-              <b-select v-model="radius" id="radius">
+              <b-select v-model="radius" id="radius" expanded>
                 <option
                   v-for="(radiusOption, index) in radiusOptions"
                   :key="index"
@@ -42,7 +42,12 @@
               </b-select>
             </b-field>
             <b-field :label="$t('Date')" label-for="date">
-              <b-select v-model="when" id="date" :disabled="activeTab !== 0">
+              <b-select
+                v-model="when"
+                id="date"
+                :disabled="activeTab !== 0"
+                expanded
+              >
                 <option
                   v-for="(option, index) in options"
                   :key="index"
@@ -459,5 +464,16 @@ form {
   ::v-deep .field label.label {
     margin-bottom: 0;
   }
+
+  .field.is-expanded:last-child > .field-body > .field.is-grouped {
+    flex-wrap: wrap;
+    flex: 1;
+    .field {
+      flex: 1 0 auto;
+      &:first-child {
+        flex: 3 0 300px;
+      }
+    }
+  }
 }
 </style>