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

Merge 006-mobile-touch-targets: mobile foundation and bug fixes
All checks were successful
CI / check (push) Successful in 1m8s
Details
CI / build-image (push) Successful in 16s
Details

Browse Source 
- iOS zoom fix (16px input font)
- Safe area insets for notched phones
- viewport-fit=cover
- Action bar flex-wrap for narrow screens
- Slightly increased row padding on mobile
- Fix stat block panel showing wrong creature on first open
- Skip auto-opening stat block when adding on mobile
This commit is contained in:
Lukas
2026-03-24 23:26:33 +01:00
parent 9e09c8ae2a a9ca31e9bc
commit 8baccf3cd3
7 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0e1a2e" /> <meta name="theme-color" content="#0e1a2e" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

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

@@ -46,7 +46,10 @@ export function App() {
<div className="relative mx-auto flex min-h-0 w-full flex-1 flex-col gap-3 sm:max-w-2xl sm: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 sm:pt-8", actionBarAnim.topBarClass)} className={cn(
"shrink-0 pt-[env(safe-area-inset-top)] sm:pt-[max(env(safe-area-inset-top),2rem)]",
actionBarAnim.topBarClass,
)}
onAnimationEnd={actionBarAnim.onTopBarExitEnd} onAnimationEnd={actionBarAnim.onTopBarExitEnd}
> >
<TurnNavigation /> <TurnNavigation />
@@ -85,7 +88,10 @@ export function App() {
</div> </div>
<div <div
className={cn("shrink-0 sm:pb-8", actionBarAnim.settlingClass)} className={cn(
"shrink-0 pb-[env(safe-area-inset-bottom)] sm:pb-[max(env(safe-area-inset-bottom),2rem)]",
actionBarAnim.settlingClass,
)}
onAnimationEnd={actionBarAnim.onSettleEnd} onAnimationEnd={actionBarAnim.onSettleEnd}
> >
<ActionBar <ActionBar

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

@@ -279,7 +279,8 @@ export function ActionBar({
const handleAddFromBestiary = useCallback( const handleAddFromBestiary = useCallback(
(result: SearchResult) => { (result: SearchResult) => {
const creatureId = addFromBestiary(result); const creatureId = addFromBestiary(result);
if (creatureId && panelView.mode === "closed") { const isDesktop = globalThis.matchMedia("(min-width: 1024px)").matches;
if (creatureId && panelView.mode === "closed" && isDesktop) {
showCreature(creatureId); showCreature(creatureId);
} }
}, },
@@ -521,7 +522,7 @@ export function ActionBar({
<div className="card-glow flex items-center gap-3 border-border border-t bg-card px-4 py-3 sm:rounded-lg sm:border"> <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 flex-wrap items-center gap-2 sm:flex-nowrap"
> >
<div className="flex-1"> <div className="flex-1">
<div className="relative max-w-xs"> <div className="relative max-w-xs">

8
apps/web/src/components/combatant-row.tsx
View File

@@ -157,7 +157,7 @@ function MaxHpDisplay({
inputMode="numeric" inputMode="numeric"
value={draft} value={draft}
placeholder="Max" placeholder="Max"
className="h-7 w-[7ch] text-center text-sm tabular-nums" className="h-7 w-[7ch] text-center tabular-nums"
onChange={(e) => setDraft(e.target.value)} onChange={(e) => setDraft(e.target.value)}
onBlur={commit} onBlur={commit}
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -272,7 +272,7 @@ function AcDisplay({
inputMode="numeric" inputMode="numeric"
value={draft} value={draft}
placeholder="AC" placeholder="AC"
className="h-7 w-[6ch] text-center text-sm tabular-nums" className="h-7 w-[6ch] text-center tabular-nums"
onChange={(e) => setDraft(e.target.value)} onChange={(e) => setDraft(e.target.value)}
onBlur={commit} onBlur={commit}
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -348,7 +348,7 @@ function InitiativeDisplay({
value={draft} value={draft}
placeholder="--" placeholder="--"
className={cn( className={cn(
"h-7 w-full text-center text-sm tabular-nums", "h-7 w-full text-center tabular-nums",
dimmed && "opacity-50", dimmed && "opacity-50",
)} )}
onChange={(e) => setDraft(e.target.value)} onChange={(e) => setDraft(e.target.value)}
@@ -520,7 +520,7 @@ export function CombatantRow({
isPulsing && "animate-concentration-pulse", isPulsing && "animate-concentration-pulse",
)} )}
> >
<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-2 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3"> <div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-3 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3 sm:py-2">
{/* Concentration */} {/* Concentration */}
<button <button
type="button" type="button"

2
apps/web/src/components/hp-adjust-popover.tsx
View File

@@ -106,7 +106,7 @@ export function HpAdjustPopover({
inputMode="numeric" inputMode="numeric"
value={inputValue} value={inputValue}
placeholder="HP" placeholder="HP"
className="h-7 w-[7ch] text-center text-sm tabular-nums" className="h-7 w-[7ch] text-center tabular-nums"
onChange={(e) => { onChange={(e) => {
const v = e.target.value; const v = e.target.value;
if (v === "" || DIGITS_ONLY_REGEX.test(v)) { if (v === "" || DIGITS_ONLY_REGEX.test(v)) {

2
apps/web/src/components/ui/input.tsx
View File

@@ -12,7 +12,7 @@ export const Input = ({
<input <input
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-foreground text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50", "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
className, className,
)} )}
{...props} {...props}

16
apps/web/src/hooks/use-auto-stat-block.ts
View File

@@ -1,4 +1,4 @@
import { useEffect } from "react"; import { useEffect, useRef } from "react";
import { useEncounterContext } from "../contexts/encounter-context.js"; import { useEncounterContext } from "../contexts/encounter-context.js";
import { useSidePanelContext } from "../contexts/side-panel-context.js"; import { useSidePanelContext } from "../contexts/side-panel-context.js";
@@ -8,10 +8,20 @@ export function useAutoStatBlock(): void {
const activeCreatureId = const activeCreatureId =
encounter.combatants[encounter.activeIndex]?.creatureId; encounter.combatants[encounter.activeIndex]?.creatureId;
const prevActiveIndexRef = useRef(encounter.activeIndex);
useEffect(() => { useEffect(() => {
if (activeCreatureId && panelView.mode === "creature") { const prevIndex = prevActiveIndexRef.current;
prevActiveIndexRef.current = encounter.activeIndex;
// Only auto-update when the active turn changes (advance/retreat),
// not when the panel mode changes (user clicking a different creature).
if (
encounter.activeIndex !== prevIndex &&
activeCreatureId &&
panelView.mode === "creature"
) {
updateCreature(activeCreatureId); updateCreature(activeCreatureId);
} }
}, [activeCreatureId, panelView.mode, updateCreature]); }, [encounter.activeIndex, activeCreatureId, panelView.mode, updateCreature]);
} }