From 636324deea42ff793efe472f06689a72d6573358 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Thu, 6 Jul 2023 18:47:00 +0200
Subject: [PATCH] improve responsiveness

---
 src/App.vue                  | 2 +-
 src/components/SearchBar.vue | 4 +++-
 src/components/TheSearch.vue | 2 +-
 src/views/TheTopics.vue      | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d5fde62..15857df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,7 @@ onMounted (async () => {
     </div>
   </header>
   
-  <main class="max-w-5xl m-auto">
+  <main class="flex flex-col">
     <RouterView>
     </RouterView>
   </main>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 8328eff..4101cfe 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -3,5 +3,7 @@ import TheSearch from '@/components/TheSearch.vue';
 </script>
 
 <template>
-  <TheSearch />
+  <div class="w-screen bg-background-100 dark:bg-background-900 p-2">
+    <TheSearch />
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/components/TheSearch.vue b/src/components/TheSearch.vue
index 4f50965..c470036 100644
--- a/src/components/TheSearch.vue
+++ b/src/components/TheSearch.vue
@@ -10,7 +10,7 @@ onUpdated(() => updateSearch(searchValue, searchType));
 </script>
 
 <template>
-  <form class="sticky top-2 flex flex-row place-content-center m-2">
+  <form class="sticky top-2 flex flex-row place-content-center">
     <label class="hidden" for="searchBar">Suche</label>
     <div class="flex flex-row w-full max-w-5xl gap-2">
       <input
diff --git a/src/views/TheTopics.vue b/src/views/TheTopics.vue
index f322edf..bb99818 100644
--- a/src/views/TheTopics.vue
+++ b/src/views/TheTopics.vue
@@ -7,9 +7,9 @@ import SearchBar from '@/components/SearchBar.vue'
 <template>
   <SearchBar />
   <div
-    class="flex flex-row"
+    class="flex flex-row place-content-center xl:w-3/4 place-self-center"
     >
     <FilterSidebar />
-    <TopicList />
+    <TopicList class="grow" />
   </div>
 </template>
\ No newline at end of file