studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Use :first-child and :focus-within to restrict hint visibility to the first tile
This commit is contained in:
Cyril
2026-03-02 10:27:43 +01:00
parent 487340efca
commit f1ddd7fa2f
2 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
View File

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

13
src/frontend/src/styles/livekit.css
View File

@@ -172,3 +172,16 @@
display: flex; display: flex;
align-items: center; 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;
}