From 445f09e16a09a5816fc31235376e931853434477 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 25 Jan 2023 17:01:50 +0100
Subject: [PATCH] Hide instrument filter on mobile

---
 .../src/components/instruments/InstrumentFilter.vue  |  5 ++++-
 client/src/pages/instrumentOverview.vue              | 12 +++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
index 4200b8b0..924120e5 100644
--- a/client/src/components/instruments/InstrumentFilter.vue
+++ b/client/src/components/instruments/InstrumentFilter.vue
@@ -39,7 +39,10 @@ export default {
 @import '~styles/helpers';
 
 .instrument-filter {
-  display: flex;
+  display: none;
+  @include desktop {
+    display: flex;
+  }
   flex-direction: column;
 }
 </style>
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 2a240e4b..0308a327 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -87,14 +87,12 @@ export default {
 
 .instrument-overview {
   display: grid;
-  //grid-template-rows: auto auto 1fr;
-  grid-template-columns: 300px auto;
-  grid-column-gap: $small-spacing;
-  //@include centered(800px);
-  padding: 0 $small-spacing;
-
-  &__filter {
+  @include desktop {
+    grid-template-columns: 300px auto;
   }
+  grid-column-gap: $small-spacing;
+  padding: 0 $small-spacing;
+  box-sizing: border-box;
 
   &__list {
     padding: $large-spacing 0;