From f041399fe948f24d1902121555b580cc22ef4a36 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sun, 1 Nov 2026 01:17:45 +0700
Subject: [PATCH] ui: make desktop status compact and non-overlapping

---
 src/components/Layout.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 988ab92..64e5b58 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -237,8 +237,6 @@ function MobileHeaderUserMenu({
           </Avatar>
           {/* Status indicator */}
           <UserStatusIndicator pubkey={pubkey} size="sm" />
-          {/* Green online indicator dot */}
-          <span className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-black bg-green-500 xs:hidden" />
         </Link>
         <DropdownMenuTrigger asChild>
           <button
@@ -490,15 +488,18 @@ function DesktopStatusButton({ onOpen }: { onOpen: () => void }) {
     : null;
   const label = preset ? t(preset.labelKey) : status?.status;
   const emoji = status?.emoji || preset?.emoji;
+  const title = status && label
+    ? `${label} — ${t('chromeUi.setYourStatus')}`
+    : t('chromeUi.setYourStatus');
 
   return (
     <Button
       variant="ghost"
       onClick={onOpen}
-      title={t('chromeUi.setYourStatus')}
-      aria-label={t('chromeUi.setYourStatus')}
+      title={title}
+      aria-label={title}
       className={cn(
-        'h-9 gap-1.5 rounded-full border border-white/10 px-2.5 text-gray-300',
+        'h-9 w-9 shrink-0 rounded-full border border-white/10 p-0 text-gray-300',
         'hover:border-green-500/30 hover:bg-green-500/10 hover:text-green-300',
         status && 'border-green-500/20 bg-green-500/5 text-green-200',
       )}
@@ -508,9 +509,6 @@ function DesktopStatusButton({ onOpen }: { onOpen: () => void }) {
       ) : (
         <SmilePlus className="h-4 w-4 text-green-400/80" />
       )}
-      <span className="hidden max-w-[7rem] truncate text-xs font-semibold lg:inline">
-        {label || t('chromeUi.status')}
-      </span>
     </Button>
   );
 }