Improve mobile responsiveness

This commit is contained in:
dragongoose 2023-04-11 20:49:52 -04:00
parent 7739bc99f0
commit ab6c499cad

View file

@ -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>