From 18ce8754c2dd95f46e4126332ac4dee520edac43 Mon Sep 17 00:00:00 2001
From: Refringe <me@refringe.com>
Date: Sat, 5 Oct 2024 14:32:25 -0400
Subject: [PATCH] User Profile Follow Component Mobile Optimization

---
 app/Livewire/User/FollowCard.php                     |  2 +-
 resources/views/livewire/user/follow-card.blade.php  |  6 +++---
 resources/views/livewire/user/follow-cards.blade.php |  6 +++---
 resources/views/user/show.blade.php                  | 10 +++-------
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/Livewire/User/FollowCard.php b/app/Livewire/User/FollowCard.php
index cd8158e..859db82 100644
--- a/app/Livewire/User/FollowCard.php
+++ b/app/Livewire/User/FollowCard.php
@@ -50,7 +50,7 @@ class FollowCard extends Component
      * The maximum number of users to display on the card.
      */
     #[Locked]
-    public int $limit = 5;
+    public int $limit = 4;
 
     /**
      * Whether to show all users in a model dialog.
diff --git a/resources/views/livewire/user/follow-card.blade.php b/resources/views/livewire/user/follow-card.blade.php
index d6a1d7a..6a65289 100644
--- a/resources/views/livewire/user/follow-card.blade.php
+++ b/resources/views/livewire/user/follow-card.blade.php
@@ -13,8 +13,8 @@
             @foreach ($followUsers->take($limit) as $user)
                 {{-- User Badge --}}
                 <div class="relative group">
-                    <a href="{{ $user->profileUrl() }}" class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
-                        <img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="h-full w-full rounded-full" />
+                    <a href="{{ $user->profileUrl() }}" class="rounded-full -ml-7 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
+                        <img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="h-16 w-16 rounded-full" />
                     </a>
                     <div class="absolute bottom-full -ml-3 left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
                         {{ $user->name }}
@@ -52,7 +52,7 @@
                     @foreach ($followUsers as $user)
                         <div class="flex group/item dark:hover:bg-gray-950 items-center p-2 pr-3 rounded-md">
                             <a href="{{ $user->profileUrl() }}" class="flex-shrink-0 w-16 h-16 items-center">
-                                <img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="block w-full h-full rounded-full" />
+                                <img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="block w-16 h-16 rounded-full" />
                             </a>
                             <div class="flex flex-col w-full pl-3">
                                 <a href="{{ $user->profileUrl() }}" class="text-2xl group-hover/item:underline group-hover/item:text-white">{{ $user->name }}</a>
diff --git a/resources/views/livewire/user/follow-cards.blade.php b/resources/views/livewire/user/follow-cards.blade.php
index d3d349d..58483af 100644
--- a/resources/views/livewire/user/follow-cards.blade.php
+++ b/resources/views/livewire/user/follow-cards.blade.php
@@ -3,11 +3,11 @@
     'authFollowIds' => collect(),
 ])
 
-<div class="w-full max-w-sm">
-    <div class="flex w-full max-w-sm">
+<div class="grid grid-cols-2 w-full gap-6">
+    <div class="col-span-full md:col-span-1 lg:col-span-2 flex w-full">
         <livewire:user.follow-card relationship="followers" :profile-user="$profileUser" :auth-follow-ids="$authFollowIds" />
     </div>
-    <div class="flex w-full max-w-sm">
+    <div class="col-span-full md:col-span-1 lg:col-span-2 flex w-full">
         <livewire:user.follow-card relationship="following" :profile-user="$profileUser" :auth-follow-ids="$authFollowIds" />
     </div>
 </div>
diff --git a/resources/views/user/show.blade.php b/resources/views/user/show.blade.php
index 469aceb..5c4a67b 100644
--- a/resources/views/user/show.blade.php
+++ b/resources/views/user/show.blade.php
@@ -37,11 +37,6 @@
     </div>
     <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
         <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
-            {{-- Mobile Follows --}}
-            <div class="lg:hidden flex flex-col justify-top items-center">
-                <livewire:user.follow-cards :profile-user="$user" />
-            </div>
-
             {{-- Left Column --}}
             <div x-data="{ selectedTab: window.location.hash ? window.location.hash.substring(1) : 'wall' }" x-init="$watch('selectedTab', (tab) => {window.location.hash = tab})" class="lg:col-span-3 flex flex-col gap-6">
 
@@ -104,8 +99,9 @@
                 </div>
             </div>
 
-            {{-- Desktop Follows --}}
-            <div class="max-lg:hidden flex flex-col justify-top items-center gap-6">
+            {{-- Right Column --}}
+            <div class="col-span-1 flex flex-col justify-top items-center">
+                {{-- Follows --}}
                 <livewire:user.follow-cards :profile-user="$user" />
             </div>
         </div>