improve responsiveness

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>

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>

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

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>