From ab6c499cadb77f82ca8baf22acbd5d8fa56352e1 Mon Sep 17 00:00:00 2001
From: dragongoose <19649813+dragongoose@users.noreply.github.com>
Date: Tue, 11 Apr 2023 20:49:52 -0400
Subject: [PATCH] Improve mobile responsiveness

---
 src/views/UserView.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index 5cf2764..62c5474 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -87,7 +87,7 @@ export default {
         <video-player :options="videoOptions"> </video-player>
       </div>
 
-      <div class="w-full flex-wrap p-3">
+      <div class="w-full flex-wrap md:p-3">
         <div class="inline-flex md:w-2/3">
           <div class="w-20 h-20 relative">
             <img
@@ -103,11 +103,11 @@ export default {
           </div>
 
           <div class="ml-3 content-between">
-            <h1 class="text-4xl font-bold">{{ data.username }}</h1>
+            <h1 class="text-2xl md:text-4xl font-bold">{{ data.username }}</h1>
             <h1 v-if="!data.stream" class="font-bold text-md self-end">
               {{ data.followersAbbv }} Followers
             </h1>
-            <div v-else class="w-[17rem]">
+            <div v-else class="w-[14rem] md:w-[17rem]">
               <p class="text-sm font-bold text-gray-200 self-end">
                 {{ truncate(data.stream.title, 130) }}
               </p>
@@ -124,7 +124,7 @@ export default {
             </p>
           </div>
           <div v-else class="w-full">
-            <ul class="text-xs font-bold md:text-right space-x-1 space-y-1 overflow-y-auto">
+            <ul class="text-xs font-bold text-left md:text-right space-x-1 space-y-1 overflow-y-auto">
               <li
                 v-for="tag in data.stream.tags"
                 :key="tag"
@@ -136,7 +136,7 @@ export default {
           </div>
         </div>
 
-        <div class="pt-2 pl- inline-flex">
+        <div class="pt-2 inline-flex">
           <follow-button :username="data.username"></follow-button>
           <p class="align-baseline font-bold ml-3">{{ data.followersAbbv }} Followers</p>
         </div>