feat: improve loading state handling in LayoutWrapper and adjust ProfilePage layout

src/app/[handle]/page.tsx

@@ -381,14 +381,14 @@ export default function ProfilePage() {
                     <div style={{
                         display: 'flex',
                         justifyContent: 'space-between',
-                        alignItems: 'flex-end',
-                        marginTop: '-48px',
+                        alignItems: 'flex-start',
                     }}>
                         <div className="avatar avatar-lg" style={{
                             width: '96px',
                             height: '96px',
                             fontSize: '36px',
                             border: '4px solid var(--background)',
+                            marginTop: '-48px',
                         }}>
                             {user.avatarUrl ? (
                                 <img src={user.avatarUrl} alt={user.displayName || user.handle} />
@@ -397,21 +397,22 @@ export default function ProfilePage() {
                             )}
                         </div>
 
-                        {!isOwnProfile && currentUser && (
-                            <button
-                                className={`btn ${isFollowing ? '' : 'btn-primary'}`}
-                                onClick={handleFollow}
-                                style={{ marginBottom: '12px' }}
-                            >
-                                {isFollowing ? 'Following' : 'Follow'}
-                            </button>
-                        )}
+                        <div style={{ paddingTop: '12px' }}>
+                            {!isOwnProfile && currentUser && (
+                                <button
+                                    className={`btn ${isFollowing ? '' : 'btn-primary'}`}
+                                    onClick={handleFollow}
+                                >
+                                    {isFollowing ? 'Following' : 'Follow'}
+                                </button>
+                            )}
 
-                        {isOwnProfile && (
-                            <button className="btn" style={{ marginBottom: '12px' }} onClick={() => setIsEditing(!isEditing)}>
-                                {isEditing ? 'Close' : 'Edit Profile'}
-                            </button>
-                        )}
+                            {isOwnProfile && (
+                                <button className="btn" onClick={() => setIsEditing(!isEditing)}>
+                                    {isEditing ? 'Close' : 'Edit Profile'}
+                                </button>
+                            )}
+                        </div>
                     </div>
 
                     {/* User Info */}

src/app/globals.css

@@ -227,12 +227,14 @@ a.btn-primary:visited {
   position: sticky;
   top: 0;
   height: 100vh;
+  overflow-y: auto;
 }
 
 .main {
   flex: 1;
   max-width: 600px;
   min-width: 0;
+  min-height: 100vh;
   border-right: 1px solid var(--border);
 }
 
@@ -240,9 +242,11 @@ a.btn-primary:visited {
   width: 320px;
   flex-shrink: 0;
   padding: 16px;
+  padding-bottom: 32px;
   position: sticky;
   top: 0;
   height: 100vh;
+  overflow-y: auto;
 }
 
 /* Post */
@@ -1307,4 +1311,4 @@ a.btn-primary:visited {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-}
+}