Fixed the Creator Studio overflow after stream-key rotation.

This commit is contained in:
2026-05-15 23:16:37 +03:30
parent 357d01e014
commit 23fc22db7c

View File

@@ -243,8 +243,8 @@ export default function Dashboard({
</Panel> </Panel>
</section> </section>
) : ( ) : (
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_380px]"> <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1fr)_380px]">
<div className="grid gap-6"> <div className="grid min-w-0 gap-6">
<section className="grid gap-4 md:grid-cols-3"> <section className="grid gap-4 md:grid-cols-3">
<MetricCard <MetricCard
label="Broadcast state" label="Broadcast state"
@@ -438,7 +438,7 @@ export default function Dashboard({
</Panel> </Panel>
</div> </div>
<aside className="grid content-start gap-6"> <aside className="grid min-w-0 content-start gap-6">
<Panel title="OBS stream key"> <Panel title="OBS stream key">
<div className="border-warning/40 bg-warning/10 text-warning mb-4 flex items-start gap-3 rounded-md border p-3 text-sm"> <div className="border-warning/40 bg-warning/10 text-warning mb-4 flex items-start gap-3 rounded-md border p-3 text-sm">
<ShieldAlert className="mt-0.5 size-4 shrink-0" /> <ShieldAlert className="mt-0.5 size-4 shrink-0" />
@@ -587,7 +587,7 @@ function Panel({
children: ReactNode; children: ReactNode;
}) { }) {
return ( return (
<section className="rounded-md border bg-card p-5 shadow-sm"> <section className="min-w-0 rounded-md border bg-card p-5 shadow-sm">
<div className="mb-5"> <div className="mb-5">
<h2 className="font-semibold">{title}</h2> <h2 className="font-semibold">{title}</h2>
{description && ( {description && (
@@ -660,14 +660,14 @@ function CopyRow({
onCopy: (text: string) => Promise<boolean>; onCopy: (text: string) => Promise<boolean>;
}) { }) {
return ( return (
<div className="grid gap-2"> <div className="grid min-w-0 gap-2">
<div className="text-xs font-medium text-muted-foreground uppercase"> <div className="text-xs font-medium text-muted-foreground uppercase">
{label} {label}
</div> </div>
<div className="flex gap-2"> <div className="flex min-w-0 gap-2">
<code <code
className={cn( className={cn(
'min-w-0 flex-1 overflow-hidden rounded-md border bg-background px-3 py-2 text-xs text-ellipsis', 'min-w-0 flex-1 overflow-hidden rounded-md border bg-background px-3 py-2 text-xs text-ellipsis whitespace-nowrap',
muted && 'text-muted-foreground', muted && 'text-muted-foreground',
)} )}
> >
@@ -677,6 +677,7 @@ function CopyRow({
type="button" type="button"
variant={copied ? 'default' : 'outline'} variant={copied ? 'default' : 'outline'}
size="icon" size="icon"
className="shrink-0"
onClick={() => void onCopy(value)} onClick={() => void onCopy(value)}
> >
{copied ? ( {copied ? (