From bf592940810ef6ab77da6ff11efe81a3e0d9c3ee Mon Sep 17 00:00:00 2001
From: dragongoose <dragonmail14@protonmail.com>
Date: Mon, 10 Apr 2023 21:49:02 -0400
Subject: [PATCH] Add reactivity for mobile

---
 src/components/NavbarView.vue    |  2 +-
 src/components/StreamPreview.vue |  4 ++--
 src/components/TwitchChat.vue    |  2 +-
 src/views/HomepageView.vue       |  4 ++--
 src/views/UserView.vue           | 10 +++++-----
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/NavbarView.vue b/src/components/NavbarView.vue
index f98239a..5b6e379 100644
--- a/src/components/NavbarView.vue
+++ b/src/components/NavbarView.vue
@@ -9,7 +9,7 @@ export default {}
     </router-link>
 
     <div>
-      <form class="relative">
+      <form class="relative hidden md:block">
         <label for="searchBar" class="hidden">Search</label>
         <v-icon
           name="io-search-outline"
diff --git a/src/components/StreamPreview.vue b/src/components/StreamPreview.vue
index 7baf2dc..486d4f5 100644
--- a/src/components/StreamPreview.vue
+++ b/src/components/StreamPreview.vue
@@ -59,7 +59,7 @@ export default {
 
 <template>
   <div v-if="streamData">
-    <div class="bg-ctp-crust rounded-lg w-[27rem]">
+    <div class="bg-ctp-crust rounded-lg w-[23rem] md:w-[27rem]">
       <RouterLink :to="'/' + streamData.streamer.name">
         <img :src="streamData.preview" class="rounded-lg rounded-b-none" />
       </RouterLink>
@@ -68,7 +68,7 @@ export default {
           <div class="inline-flex">
             <img :src="streamData.streamer.pfp" class="rounded-full mr-2" />
             <div class="w-full">
-              <p class="font-bold w-[22.9rem] truncate">{{ streamData.title }}</p>
+              <p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ streamData.title }}</p>
               <div class="inline-flex w-full justify-between">
                 <p class="text-gray-300">{{ streamData.streamer.name }}</p>
                 <p class="self-end float-right">
diff --git a/src/components/TwitchChat.vue b/src/components/TwitchChat.vue
index e90dd8c..750167d 100644
--- a/src/components/TwitchChat.vue
+++ b/src/components/TwitchChat.vue
@@ -83,7 +83,7 @@ export default {
 }
 </script>
 <template>
-  <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col">
+  <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-[99vw] md:max-w-[15.625rem] flex flex-col">
     
     <!-- SYSTEM MESSAGES -->
     <ul
diff --git a/src/views/HomepageView.vue b/src/views/HomepageView.vue
index 4046ed6..343e4c0 100644
--- a/src/views/HomepageView.vue
+++ b/src/views/HomepageView.vue
@@ -157,14 +157,14 @@ export default {
         ref="categoryItem"
         class="inline-flex m-2 hover:scale-105 transition-transform"
       >
-        <div class="bg-ctp-crust max-w-[13.5rem] rounded-lg">
+        <div class="bg-ctp-crust w-40 lg:w-[13.5rem] md:w-[13.5rem] rounded-lg">
           <router-link :to="`/game/${category.name}`">
             <img :src="category.image" class="rounded-lg rounded-b-none" />
           </router-link>
 
           <div class="p-2">
             <div>
-              <p class="font-bold text-white text-xl">{{ category.displayName }}</p>
+              <p class="font-bold text-white text-xl sm:text-base md:text-xl">{{ category.displayName }}</p>
               <p class="text-sm text-white">{{ abbreviate(category.viewers) }} viewers</p>
             </div>
 
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index aa9a2f4..07fb29f 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -75,14 +75,14 @@ export default {
 
   <error-message v-else-if="data.status === 'error'"></error-message>
 
-  <div v-else class="w-full justify-center inline-flex space-x-4 p-4">
-    <div class="flex bg-ctp-crust flex-col p-6 rounded-lg max-w-prose min-w-[65ch] text-white">
+  <div v-else class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4">
+    <div class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] text-white">
       <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
         <video-player :options="videoOptions"> </video-player>
       </div>
 
       <div class="w-full flex-wrap p-3">
-        <div class="inline-flex w-2/3">
+        <div class="inline-flex md:w-2/3">
           <div class="w-20 h-20 relative">
             <img
               :src="data.pfp"
@@ -109,7 +109,7 @@ export default {
           </div>
         </div>
 
-        <div class="inline-flex w-1/3 float-right h-full text-right">
+        <div class="flex-col md:inline-flex md:w-1/3 float-right h-full text-right">
           <div v-if="!data.isLive" class="w-full">
             <p
               class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red"
@@ -118,7 +118,7 @@ export default {
             </p>
           </div>
           <div v-else class="w-full">
-            <ul class="text-xs font-bold text-right space-x-1 space-y-1 overflow-y-auto">
+            <ul class="text-xs font-bold md:text-right space-x-1 space-y-1 overflow-y-auto">
               <li
                 v-for="tag in data.stream.tags"
                 :key="tag"