From 2a5a0e295048703bbd63296f0413e484af3960df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20R=C3=A9mond?= <mremond@process-one.net>
Date: Fri, 10 Jul 2026 16:42:43 +0200
Subject: [PATCH] fix(room-modal): center identity hero + drop close-button
 autofocus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Room Info modal placed a 96px avatar beside a lone muted JID, and the
focus trap landed initial focus on the header close button — drawing the
focus ring and popping its 'Close' tooltip unprompted on open.

- ModalShell: mark the X close button tabIndex={-1}. Escape closes the
  modal, so the X is a pointer-only affordance; keeping it out of the tab
  order (and the trap's initial target) means opening any titled modal no
  longer autofocuses it or pops its tooltip.
- RoomInfoModal: rebalance the identity block into a centered hero
  (avatar over JID); the room name already reads as the modal title.
---
 apps/fluux/src/components/ModalShell.tsx    | 5 +++++
 apps/fluux/src/components/RoomInfoModal.tsx | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/fluux/src/components/ModalShell.tsx b/apps/fluux/src/components/ModalShell.tsx
index 551194433..fd7f78e82 100644
--- a/apps/fluux/src/components/ModalShell.tsx
+++ b/apps/fluux/src/components/ModalShell.tsx
@@ -39,6 +39,11 @@ export function ModalShell({
               <button
                 onClick={close}
                 aria-label={t('common.close')}
+                // Escape closes the modal, so the X is a pointer-only affordance:
+                // kept out of the tab order (and thus the focus trap's initial
+                // target) so opening a modal never lands focus here — which would
+                // otherwise draw the focus ring and pop this tooltip unprompted.
+                tabIndex={-1}
                 className="p-1 text-fluux-muted hover:text-fluux-text rounded hover:bg-fluux-hover tap-target"
               >
                 <X className="size-4" />
diff --git a/apps/fluux/src/components/RoomInfoModal.tsx b/apps/fluux/src/components/RoomInfoModal.tsx
index 5a3af4b6c..4e3d5533a 100644
--- a/apps/fluux/src/components/RoomInfoModal.tsx
+++ b/apps/fluux/src/components/RoomInfoModal.tsx
@@ -22,10 +22,10 @@ export function RoomInfoModal({ room, onClose }: RoomInfoModalProps) {
   return (
     <ModalShell title={room.name} onClose={onClose} width="max-w-md" panelClassName="max-h-[80vh] flex flex-col">
       <div className="p-4 flex flex-col gap-4 flex-1 min-h-0 overflow-y-auto">
-        {/* Identity row */}
-        <div className="flex items-center gap-3 min-w-0">
+        {/* Identity — centered hero (the name is the modal title above) */}
+        <div className="flex flex-col items-center gap-2 text-center">
           <RoomAvatar identifier={room.jid} name={room.name} avatarUrl={room.avatar} size="xl" />
-          <p className="text-sm text-fluux-muted break-all select-text">{room.jid}</p>
+          <p className="text-sm text-fluux-muted break-all select-text max-w-full">{room.jid}</p>
         </div>
 
         {/* Topic — only when set */}