dostulata/initiative
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Make layout full-width on mobile with docked top/bottom bars

Browse Source 
Remove max-width constraint and horizontal padding on small screens
so content goes edge-to-edge. Turn navigation and action bar lose
rounded corners on mobile and dock flush to top/bottom edges.
Desktop layout (sm: and up) is unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-24 17:36:01 +01:00
parent e1a06c9d59
commit 7092677273
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/App.tsx
View File

@@ -43,10 +43,10 @@ export function App() {
return ( return (
<div className="flex h-dvh flex-col"> <div className="flex h-dvh flex-col">
<div className="relative mx-auto flex min-h-0 w-full max-w-2xl flex-1 flex-col gap-3 px-4"> <div className="relative mx-auto flex min-h-0 w-full flex-1 flex-col gap-3 sm:max-w-2xl sm:px-4">
{!!actionBarAnim.showTopBar && ( {!!actionBarAnim.showTopBar && (
<div <div
className={cn("shrink-0 pt-8", actionBarAnim.topBarClass)} className={cn("shrink-0 sm:pt-8", actionBarAnim.topBarClass)}
onAnimationEnd={actionBarAnim.onTopBarExitEnd} onAnimationEnd={actionBarAnim.onTopBarExitEnd}
> >
<TurnNavigation /> <TurnNavigation />
@@ -85,7 +85,7 @@ export function App() {
</div> </div>
<div <div
className={cn("shrink-0 pb-8", actionBarAnim.settlingClass)} className={cn("shrink-0 sm:pb-8", actionBarAnim.settlingClass)}
onAnimationEnd={actionBarAnim.onSettleEnd} onAnimationEnd={actionBarAnim.onSettleEnd}
> >
<ActionBar <ActionBar

2
apps/web/src/components/action-bar.tsx
View File

@@ -518,7 +518,7 @@ export function ActionBar({
}); });
return ( return (
<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3"> <div className="card-glow flex items-center gap-3 border-border border-t bg-card px-4 py-3 sm:rounded-lg sm:border">
<form <form
onSubmit={handleAdd} onSubmit={handleAdd}
className="relative flex flex-1 items-center gap-2" className="relative flex flex-1 items-center gap-2"

2
apps/web/src/components/turn-navigation.tsx
View File

@@ -12,7 +12,7 @@ export function TurnNavigation() {
const activeCombatant = encounter.combatants[encounter.activeIndex]; const activeCombatant = encounter.combatants[encounter.activeIndex];
return ( return (
<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3"> <div className="card-glow flex items-center gap-3 border-border border-b bg-card px-4 py-3 sm:rounded-lg sm:border">
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"