chore: fix mobile layout

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

components/pages/events/event-distance.vue

@@ -1,14 +1,12 @@
 <template>
-  <v-row
+  <v-row dense>
-    wrap
+    <v-col cols="12" sm="12" md="6">
-  >
-    <v-col xs="12" sm="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>

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