♻️(frontend) show shortcut hint only on first grid tile via CSS

Use :first-child and :focus-within to restrict hint visibility to the first tile

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -231,9 +231,9 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
-      {hasKeyboardFocus && (
+      <div className="shortcut-hint-wrapper">
         <KeyboardShortcutHint>{t('toolbarHint')}</KeyboardShortcutHint>
-      )}
+      </div>
     </div>
   )
 })

src/frontend/src/styles/livekit.css

@@ -172,3 +172,16 @@
   display: flex;
   align-items: center;
 }
+
+/* Shortcut hint: visible only on first grid tile when focused (CSS-based) */
+.shortcut-hint-wrapper {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+.lk-grid-layout > *:first-child:focus-within .shortcut-hint-wrapper {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}