From f7b0140eec83a5d1c91a307979867ba96c2c2dd4 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 6 Sep 2022 10:55:24 +0200
Subject: [PATCH] Make grids mobile-ish

---
 client/src/views/Handlungsfeld.vue           | 2 +-
 client/src/views/HandlungsfelderOverview.vue | 4 ++--
 client/src/views/MediaMainView.vue           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/views/Handlungsfeld.vue b/client/src/views/Handlungsfeld.vue
index 39056cae..0e33dbdb 100644
--- a/client/src/views/Handlungsfeld.vue
+++ b/client/src/views/Handlungsfeld.vue
@@ -201,7 +201,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
           v-for="item in field.items" :key="item.title">
           <h2 class="mb-4">{{item.title}}</h2>
           <ul :class="{
-            'grid gap-4 grid-cols-2': displayAsCard(item.type),
+            'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
             'border-t': !displayAsCard(item.type),
             'mb-6': hasMoreItemsForType(item.type, item.items)
           }">
diff --git a/client/src/views/HandlungsfelderOverview.vue b/client/src/views/HandlungsfelderOverview.vue
index 80ebeab7..2552430e 100644
--- a/client/src/views/HandlungsfelderOverview.vue
+++ b/client/src/views/HandlungsfelderOverview.vue
@@ -75,14 +75,14 @@ const dropdownSelected = ref(dropdownItems[0])
 
 <template>
   <div class="mx-auto max-w-5xl">
-    <div class="flex items-center justify-between mb-10">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Handlungsfelder</h1>
       <ItDropdownSelect
         v-model="dropdownSelected"
         :items="dropdownItems"></ItDropdownSelect>
     </div>
     <div>
-      <ul class="grid gap-5 grid-cols-4">
+      <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
         <li
           class="bg-white p-4 w-58"
           v-for="field in fields"
diff --git a/client/src/views/MediaMainView.vue b/client/src/views/MediaMainView.vue
index db5e3cec..609efd89 100644
--- a/client/src/views/MediaMainView.vue
+++ b/client/src/views/MediaMainView.vue
@@ -25,7 +25,7 @@ const dropdownSelected = ref(dropdownItems[0])
 
 <template>
   <div class="mx-auto max-w-5xl">
-    <div class="flex items-center justify-between mb-10">
+    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
       <h1>Mediathek</h1>
       <ItDropdownSelect
         v-model="dropdownSelected"