lfg2025/botfights
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile layout — 30% fight view / 70% battle log split

Browse Source 
- Canvas takes 30% top, battle log + human input takes 70% bottom on mobile
- Battle log now visible on mobile for both live fights and replays (was hidden)
- Compact single-row health bar on mobile to maximize canvas space
- Desktop layout unchanged (62/38 split)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-07 21:29:57 +00:00
co-authored by Claude Opus 4.6
parent 4307a02d25
commit 5520e0760e
2 changed files with 28 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/FightViewer.vue
+8 -8
View File
@@ -401,12 +401,12 @@ async function replay() {
<template>
<div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2">
<!-- LEFT: Battle Log (hidden on mobile, shown on desktop) -->
<div class="hidden lg:flex lg:w-[38%] flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden order-2 lg:order-1">
<div class="bg-surface-raised border-b border-border px-3 py-1.5 flex items-center gap-2 flex-shrink-0">
<span class="w-2.5 h-2.5 rounded-full bg-ko" />
<span class="w-2.5 h-2.5 rounded-full bg-neon-yellow" />
<span class="w-2.5 h-2.5 rounded-full bg-neon-green" />
<!-- LEFT: Battle Log — mobile: bottom 70%, desktop: left 38% -->
<div class="flex h-[70%] lg:h-auto lg:w-[38%] flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden order-2 lg:order-1">
<div class="bg-surface-raised border-b border-border px-3 py-1 lg:py-1.5 flex items-center gap-2 flex-shrink-0">
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-ko" />
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-yellow" />
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-green" />
<span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
</div>
@@ -439,8 +439,8 @@ async function replay() {
</div>
</div>
<!-- RIGHT: Game Canvas -->
<div class="flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
<!-- RIGHT: Game Canvas — mobile: top 30%, desktop: right 62% -->
<div class="h-[30%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
<!-- Health bars — mobile: two-row (names then bars), desktop: single row -->
<div class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">