syntaxbullet/aurorabot
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve panel layout overflow on small screens
All checks were successful
CI / Deploy / test (push) Successful in 1m15s
Details
CI / Deploy / deploy (push) Successful in 1m4s
Details

Browse Source 
- Prevent horizontal overflow in the main layout
- Stack game room controls vertically on narrow viewports
- Truncate long room and user labels to keep cards stable
This commit is contained in:
syntaxbullet
2026-04-10 12:13:03 +02:00
parent 454ded8b26
commit 222f32d98f
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
panel/src/components/Layout.tsx
View File

@@ -221,7 +221,7 @@ export default function Layout({
} }
return ( return (
<div className="min-h-screen flex"> <div className="min-h-screen flex overflow-x-hidden">
{/* Mobile header bar */} {/* Mobile header bar */}
<div className="fixed top-0 left-0 right-0 z-40 flex items-center h-14 px-4 bg-background md:hidden"> <div className="fixed top-0 left-0 right-0 z-40 flex items-center h-14 px-4 bg-background md:hidden">
<button <button
@@ -286,11 +286,11 @@ export default function Layout({
</aside> </aside>
<main className={cn( <main className={cn(
"flex-1 transition-all duration-200", "min-w-0 flex-1 overflow-x-hidden transition-all duration-200",
"mt-14 md:mt-0", "mt-14 md:mt-0",
collapsed ? "md:ml-16" : "md:ml-60" collapsed ? "md:ml-16" : "md:ml-60"
)}> )}>
<div className="max-w-[1600px] mx-auto px-4 py-6 md:px-6 md:py-8"> <div className="min-w-0 max-w-[1600px] mx-auto px-4 py-6 md:px-6 md:py-8">
{children} {children}
</div> </div>
</main> </main>

24
panel/src/games/GameRoom.tsx
View File

@@ -126,7 +126,7 @@ function CompactRoomBar({
return ( return (
<div className="sticky top-[4.5rem] z-30 md:top-6"> <div className="sticky top-[4.5rem] z-30 md:top-6">
<div className="rounded-[24px] border border-white/10 bg-background/82 p-3 shadow-[0_18px_50px_rgba(0,0,0,0.28)] backdrop-blur-xl"> <div className="rounded-[24px] border border-white/10 bg-background/82 p-3 shadow-[0_18px_50px_rgba(0,0,0,0.28)] backdrop-blur-xl">
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
<div className="flex min-w-0 flex-wrap items-center gap-2"> <div className="flex min-w-0 flex-wrap items-center gap-2">
<span className={cn("rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]", stateChip(state))}> <span className={cn("rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]", stateChip(state))}>
{stateLabel(state)} {stateLabel(state)}
@@ -142,7 +142,7 @@ function CompactRoomBar({
</div> </div>
<button <button
onClick={onExit} onClick={onExit}
className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground" className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground sm:self-auto self-start"
> >
Leave Leave
</button> </button>
@@ -260,7 +260,7 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<section className={cn("overflow-hidden rounded-[32px] border p-5 shadow-[0_24px_80px_rgba(0,0,0,0.22)] sm:p-6", gameSurfaceClass(plugin.slug))}> <section className={cn("overflow-hidden rounded-[32px] border p-5 shadow-[0_24px_80px_rgba(0,0,0,0.22)] sm:p-6", gameSurfaceClass(plugin.slug))}>
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
<button <button
onClick={exitRoom} onClick={exitRoom}
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-sm text-text-secondary transition-colors hover:text-foreground"
@@ -294,7 +294,7 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
</div> </div>
<p className="mt-2 max-w-2xl text-sm text-text-secondary">{plugin.description}</p> <p className="mt-2 max-w-2xl text-sm text-text-secondary">{plugin.description}</p>
<div className="mt-4 flex flex-wrap gap-2"> <div className="mt-4 flex flex-wrap gap-2">
<span className="rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary"> <span className="break-all rounded-full border border-white/10 bg-black/10 px-3 py-1.5 text-xs text-text-secondary">
Room ID {roomCode} Room ID {roomCode}
</span> </span>
{roomFacts.map(fact => ( {roomFacts.map(fact => (
@@ -306,7 +306,7 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
</div> </div>
</div> </div>
<div className="mt-5 grid gap-3 sm:grid-cols-3"> <div className="mt-5 grid gap-3 md:grid-cols-3">
<div className="rounded-2xl border border-white/10 bg-black/12 px-4 py-3"> <div className="rounded-2xl border border-white/10 bg-black/12 px-4 py-3">
<div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-text-disabled"> <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-text-disabled">
<Users className="h-3.5 w-3.5" /> <Users className="h-3.5 w-3.5" />
@@ -339,7 +339,7 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
{hostPlayer && ( {hostPlayer && (
<div className="mt-4 flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm"> <div className="mt-4 flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm">
<span className="text-text-tertiary">Host</span> <span className="text-text-tertiary">Host</span>
<span className="font-semibold text-foreground">{hostPlayer.username}</span> <span className="min-w-0 truncate text-right font-semibold text-foreground">{hostPlayer.username}</span>
</div> </div>
)} )}
</div> </div>
@@ -347,13 +347,13 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
<div className="mt-5 space-y-3"> <div className="mt-5 space-y-3">
{sessionReplaced && ( {sessionReplaced && (
<div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-warning/20 bg-warning/10 px-4 py-3"> <div className="flex flex-col gap-3 rounded-2xl border border-warning/20 bg-warning/10 px-4 py-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
<div className="text-sm text-warning"> <div className="text-sm text-warning">
Another tab claimed this room session. Actions from this tab are currently disabled. Another tab claimed this room session. Actions from this tab are currently disabled.
</div> </div>
<button <button
onClick={rejoin} onClick={rejoin}
className="rounded-full border border-warning/20 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-warning transition-colors hover:bg-warning/10" className="self-start rounded-full border border-warning/20 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-warning transition-colors hover:bg-warning/10"
> >
Rejoin Here Rejoin Here
</button> </button>
@@ -389,7 +389,7 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
{roomStatus === "waiting" && ( {roomStatus === "waiting" && (
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"> <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
<section className="rounded-[32px] border border-white/10 bg-card/70 p-5 shadow-[0_20px_60px_rgba(0,0,0,0.16)] sm:p-6"> <section className="rounded-[32px] border border-white/10 bg-card/70 p-5 shadow-[0_20px_60px_rgba(0,0,0,0.16)] sm:p-6">
<div className="flex flex-wrap items-start justify-between gap-4"> <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
<div> <div>
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Waiting Room</div> <div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Waiting Room</div>
<h2 className="mt-3 font-display text-3xl font-semibold text-foreground"> <h2 className="mt-3 font-display text-3xl font-semibold text-foreground">
@@ -461,9 +461,9 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
<div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Room Settings</div> <div className="text-[11px] uppercase tracking-[0.2em] text-text-disabled">Room Settings</div>
<div className="mt-4 space-y-3"> <div className="mt-4 space-y-3">
{roomFacts.map(fact => ( {roomFacts.map(fact => (
<div key={fact.label} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm"> <div key={fact.label} className="flex flex-col gap-1 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-3">
<span className="text-text-tertiary">{fact.label}</span> <span className="text-text-tertiary">{fact.label}</span>
<span className="font-semibold text-foreground">{fact.value}</span> <span className="min-w-0 font-semibold text-foreground sm:text-right">{fact.value}</span>
</div> </div>
))} ))}
</div> </div>
@@ -505,7 +505,7 @@ export function GameRoom({ userId, role }: { userId: string; role?: string }) {
<div className="mt-4 space-y-3"> <div className="mt-4 space-y-3">
{spectators.map(spectator => ( {spectators.map(spectator => (
<div key={spectator.discordId} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm"> <div key={spectator.discordId} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/10 px-4 py-3 text-sm">
<span className="font-medium text-foreground">{spectator.username}</span> <span className="min-w-0 truncate font-medium text-foreground">{spectator.username}</span>
<span className="text-text-tertiary">Watching</span> <span className="text-text-tertiary">Watching</span>
</div> </div>
))} ))}