From 625dd910168dd2133cc04828abbadd4f33d467ec Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 18 Feb 2026 04:20:42 -0600
Subject: [PATCH] Adjust ComposeBox styling: increase avatar size and add text
 opacity

- Change avatar from size-11 to size-12 for better visual balance
- Increase textarea top padding from pt-2 to pt-2.5
- Add opacity-85 to textarea text for softer appearance

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/ComposeBox.tsx          | 4 ++--
 src/components/ProfileRightSidebar.tsx | 2 +-
 src/components/RightSidebar.tsx        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ComposeBox.tsx b/src/components/ComposeBox.tsx
index 60dac714..714f5bf1 100644
--- a/src/components/ComposeBox.tsx
+++ b/src/components/ComposeBox.tsx
@@ -188,7 +188,7 @@ export function ComposeBox({ onSuccess, placeholder = "What's on your mind?", co
   return (
     <div className={cn("flex gap-3 px-4 py-3", !forceExpanded && "border-b border-border")}>
       {!hideAvatar && (
-        <Avatar className="size-11 shrink-0 mt-0.5">
+        <Avatar className="size-12 shrink-0 mt-0.5">
           <AvatarImage src={metadata?.picture} alt={metadata?.name} />
           <AvatarFallback className="bg-primary/20 text-primary text-sm">
             {user ? (metadata?.name?.[0] || '?').toUpperCase() : '?'}
@@ -205,7 +205,7 @@ export function ComposeBox({ onSuccess, placeholder = "What's on your mind?", co
           onFocus={expand}
           placeholder={placeholder}
           className={cn(
-            'w-full bg-transparent text-foreground placeholder:text-muted-foreground resize-none outline-none text-lg pt-3 pb-2',
+            'w-full bg-transparent text-foreground placeholder:text-muted-foreground resize-none outline-none text-lg pt-2.5 pb-2 opacity-85',
             isExpanded ? 'min-h-[100px]' : 'min-h-[44px]',
           )}
           rows={isExpanded ? 4 : 1}
diff --git a/src/components/ProfileRightSidebar.tsx b/src/components/ProfileRightSidebar.tsx
index 2b0300dc..27bacf15 100644
--- a/src/components/ProfileRightSidebar.tsx
+++ b/src/components/ProfileRightSidebar.tsx
@@ -254,7 +254,7 @@ export function ProfileRightSidebar({ pubkey, fields }: ProfileRightSidebarProps
   const { data: media, isLoading: mediaLoading } = useProfileMedia(pubkey);
 
   return (
-    <aside className="w-[300px] shrink-0 hidden xl:flex flex-col sticky top-0 h-screen overflow-y-auto pt-4 pb-3 px-5">
+    <aside className="w-[300px] shrink-0 hidden xl:flex flex-col sticky top-0 h-screen overflow-y-auto pt-5 pb-3 px-5">
       {/* Media Section */}
       <section className="mb-6">
         <h2 className="text-xl font-bold mb-3">Media</h2>
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index 8a4de68a..2f4965c4 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -77,7 +77,7 @@ export function RightSidebar() {
   const { data: sparklineData, isLoading: sparklinesLoading } = useTagSparklines(visibleTags, isXl && visibleTags.length > 0);
 
   return (
-    <aside className="w-[300px] shrink-0 hidden xl:flex flex-col sticky top-0 h-screen overflow-y-auto pt-4 pb-3 px-5">
+    <aside className="w-[300px] shrink-0 hidden xl:flex flex-col sticky top-0 h-screen overflow-y-auto pt-5 pb-3 px-5">
       {/* Trending Tags */}
       <section className="mb-6">
         <div className="flex items-center justify-between mb-3">