From 09bfd1ccab7f7cadec2cc1d31696206f94edd5ca Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sat, 21 Mar 2026 23:41:01 +0100
Subject: [PATCH] fix: use grid layout for stream settings pills to prevent
 uneven wrapping

---
 .../src/components/voice/ScreenShareSettingsPopover.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx b/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
index 2d8c999f..54df4ca1 100644
--- a/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
+++ b/packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
@@ -109,7 +109,7 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
 
   const result = buildScreenShareOptions(config);
 
-  const pillBase = 'px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors cursor-pointer select-none';
+  const pillBase = 'px-2.5 py-1.5 rounded-full text-[13px] font-medium transition-colors cursor-pointer select-none text-center';
   const pillSelected = 'bg-accent-primary text-white';
   const pillUnselected = 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover';
 
@@ -129,10 +129,10 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
           <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
             Resolution
           </div>
-          <div className="flex flex-wrap gap-1.5">
+          <div className="grid grid-cols-3 gap-1.5">
             {RESOLUTIONS.map((r) => (
               <button
-                key={r.value}
+                key={String(r.value)}
                 onClick={() => setConfig({ height: r.value })}
                 className={`${pillBase} ${config.height === r.value ? pillSelected : pillUnselected}`}
               >
@@ -147,7 +147,7 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
           <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
             Frame Rate
           </div>
-          <div className="flex flex-wrap gap-1.5">
+          <div className="grid grid-cols-3 gap-1.5">
             {FRAME_RATES.map((f) => (
               <button
                 key={f.value}