feat: dynamic voice grid layout with ResizeObserver

Replace hardcoded Tailwind grid-cols breakpoints with a container-aware layout algorithm that uses ResizeObserver to recompute optimal tile arrangement. Maximizes tile area while maintaining 16:9 aspect ratio, automatically adapting when VoiceChatPanel opens/closes, window resizes, or fullscreen is toggled.
2026-03-10 00:10:25 +01:00
parent 2999ca95a0
commit 4767c445be
4 changed files with 118 additions and 15 deletions
@@ -133,7 +133,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
  return (
    <div
      className={`relative bg-surface-base rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ring-1 ring-white/[0.06] hover:ring-white/10 ${
-        large ? 'h-full w-full' : 'h-full aspect-video'
+        'h-full w-full'
      }`}
      onContextMenu={handleContextMenu}
    >