devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: use grid layout for stream settings pills to prevent uneven wrapping

Browse Source
This commit is contained in:
Jannis Braun
2026-03-21 23:41:01 +01:00
parent f9f7dd158f
commit 09bfd1ccab
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
+4 -4
View File
@@ -109,7 +109,7 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
const result = buildScreenShareOptions(config); 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 pillSelected = 'bg-accent-primary text-white';
const pillUnselected = 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover'; 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"> <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
Resolution Resolution
</div> </div>
<div className="flex flex-wrap gap-1.5"> <div className="grid grid-cols-3 gap-1.5">
{RESOLUTIONS.map((r) => ( {RESOLUTIONS.map((r) => (
<button <button
key={r.value} key={String(r.value)}
onClick={() => setConfig({ height: r.value })} onClick={() => setConfig({ height: r.value })}
className={`${pillBase} ${config.height === r.value ? pillSelected : pillUnselected}`} 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"> <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
Frame Rate Frame Rate
</div> </div>
<div className="flex flex-wrap gap-1.5"> <div className="grid grid-cols-3 gap-1.5">
{FRAME_RATES.map((f) => ( {FRAME_RATES.map((f) => (
<button <button
key={f.value} key={f.value}