From f213b2dbb592d2569443b82302403faba91e4b8f Mon Sep 17 00:00:00 2001
From: dragongoose <dragonmail14@protonmail.com>
Date: Mon, 27 Nov 2023 19:38:20 -0500
Subject: [PATCH] UI Centering fixes (i finally read a flexbox guide :3) #67

---
 src/views/CategoryView.vue  |  2 +-
 src/views/FollowingView.vue |  4 ++--
 src/views/HomepageView.vue  | 23 ++++++-----------------
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/views/CategoryView.vue b/src/views/CategoryView.vue
index 7196385..c4f81ff 100644
--- a/src/views/CategoryView.vue
+++ b/src/views/CategoryView.vue
@@ -135,7 +135,7 @@ export default {
     </div>
 
     <div class="max-w-[58rem] mx-auto">
-      <ul>
+      <ul class="flex flex-wrap justify-evenly">
         <li
           v-for="stream in data.streams"
           :key="stream.title"
diff --git a/src/views/FollowingView.vue b/src/views/FollowingView.vue
index 306a23a..39ebffa 100644
--- a/src/views/FollowingView.vue
+++ b/src/views/FollowingView.vue
@@ -47,8 +47,8 @@ export default {
 <template>
   <loading-screen v-if="!data && status != 'error'"></loading-screen>
   <div class="md:max-w-[50rem] w-full mx-auto text-contrast flex justify-center">
-    <ul class="m-2">
-      <li v-for="streamer in data" class="md:inline-flex">
+    <ul class="m-2 flex flex-wrap justify-center">
+      <li v-for="streamer in data" class="">
         <div class="inline-flex bg-overlay0 p-2.5 m-1 rounded-md w-[22rem]">
           <img :src="streamer.pfp" class="w-16 rounded-full" />
           <div class="justify-between flex flex-col ml-2">
diff --git a/src/views/HomepageView.vue b/src/views/HomepageView.vue
index 38b7ff0..d428847 100644
--- a/src/views/HomepageView.vue
+++ b/src/views/HomepageView.vue
@@ -117,27 +117,16 @@ export default {
         <div class="relative">
           <label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
           <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
-          <input
-            type="text"
-            id="searchBar"
-            name="searchBar"
-            :placeholder="$t('main.search')"
-            v-model="filterTags"
-            @keypress="filterSearches(filterTags)"
-            @keyup="filterSearches(filterTags)"
-            class="rounded-md p-1 pl-8 placeholder:text-white"
-          />
+          <input type="text" id="searchBar" name="searchBar" :placeholder="$t('main.search')" v-model="filterTags"
+            @keypress="filterSearches(filterTags)" @keyup="filterSearches(filterTags)"
+            class="rounded-md p-1 pl-8 placeholder:text-white" />
         </div>
       </div>
     </div>
 
-    <ul ref="categoryList">
-      <li
-        v-for="category in data"
-        :key="category.name"
-        ref="categoryItem"
-        class="inline-flex m-2 hover:scale-105 transition-transform"
-      >
+    <ul ref="categoryList" class="flex flex-wrap justify-evenly">
+      <li v-for="category in data" :key="category.name" ref="categoryItem"
+        class="m-2 hover:scale-105 transition-transform">
         <category-preview :category-data="category"></category-preview>
       </li>
     </ul>