From 0dd14fd4772dfcf40fa13f79b832fbd457660ab3 Mon Sep 17 00:00:00 2001
From: Joakim Olsson <joakim@unbound.se>
Date: Tue, 6 Feb 2024 07:43:46 +0100
Subject: [PATCH] chore: fix mobile layout

---
 components/pages/events/event-card.vue     | 15 ++++++++-------
 components/pages/events/event-distance.vue |  8 +++-----
 components/pages/events/event-page.vue     |  5 ++++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/pages/events/event-card.vue b/components/pages/events/event-card.vue
index 5fa6d95..3596cef 100644
--- a/components/pages/events/event-card.vue
+++ b/components/pages/events/event-card.vue
@@ -15,8 +15,9 @@
       </h3>
     </v-card-title>
     <v-card-text>
-      <v-row wrap>
+      <v-row dense>
         <v-col
+          cols="12"
           xs="12"
           sm="6"
         >
@@ -25,17 +26,17 @@
           }}
           ({{ weekday }} {{ daysUntil }})
         </v-col>
-        <v-col v-if="event.time" xs="12" sm="6">
+        <v-col v-if="event.time" cols="12" xs="12" sm="6">
           <strong class="mr-1" v-text="$t('events.time')" />{{
             event.time
           }}
         </v-col>
       </v-row>
-      <v-row v-if="event.danceHall" wrap>
+      <v-row v-if="event.danceHall" dense>
         <v-col
+          cols="12"
           xs="12"
           sm="6"
-          md="3"
         >
           <strong class="mr-1" v-text="$t('events.hall')" />
           <v-icon
@@ -50,9 +51,9 @@
           {{ event.danceHall.name }}
         </v-col>
         <v-col
+          cols="12"
           xs="12"
           sm="6"
-          md="3"
         >
           <strong class="mr-1" v-text="$t('events.city')" />
           <v-icon
@@ -67,9 +68,9 @@
           {{ event.danceHall.city }}
         </v-col>
         <v-col
+          cols="12"
           xs="12"
           sm="6"
-          md="3"
         >
           <strong class="mr-1" v-text="$t('events.municipality')" />
           <v-icon
@@ -86,9 +87,9 @@
           {{ event.danceHall.municipality }}
         </v-col>
         <v-col
+          cols="12"
           xs="12"
           sm="6"
-          md="3"
         >
           <strong class="mr-1" v-text="$t('events.state')" />
           <v-icon
diff --git a/components/pages/events/event-distance.vue b/components/pages/events/event-distance.vue
index 58f5152..362d869 100644
--- a/components/pages/events/event-distance.vue
+++ b/components/pages/events/event-distance.vue
@@ -1,14 +1,12 @@
 <template>
-  <v-row
-    wrap
-  >
-    <v-col xs="12" sm="6">
+  <v-row dense>
+    <v-col cols="12" sm="12" md="6">
       <v-icon class="me-1">
         mdi-home
       </v-icon>
       <span><strong>{{ distance.origin }}</strong></span>
     </v-col>
-    <v-col xs="12" sm="6">
+    <v-col cols="12" sm="12" md="6">
       <v-icon class="me-1">
         mdi-car
       </v-icon>
diff --git a/components/pages/events/event-page.vue b/components/pages/events/event-page.vue
index 2da58dd..0262aa5 100644
--- a/components/pages/events/event-page.vue
+++ b/components/pages/events/event-page.vue
@@ -11,6 +11,7 @@
           <v-text-field
             v-model="origin"
             variant="underlined"
+            hide-details
             :label="$t('origins.origin')"
             :placeholder="$t('origins.geolocation')"
           >
@@ -62,6 +63,7 @@
             :items="ranges"
             item-title="name"
             item-value="value"
+            hide-details
           />
         </v-col>
       </v-row>
@@ -73,10 +75,11 @@
             append-outer-icon="mdi-magnify"
             :label="$t('events.filter')"
             :placeholder="$t('events.filter')"
+            hide-details
           />
         </v-col>
         <v-col cols="12" sm="4">
-          <v-checkbox v-model="state.includeHidden" :label="$t('events.includeHidden')" />
+          <v-checkbox v-model="state.includeHidden" :label="$t('events.includeHidden')" hide-details />
         </v-col>
       </v-row>
       <event-list