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

fix: mobile fight layout — 50/50 split, no page scroll

Browse Source 
- Canvas 50% top, battle log 50% bottom on mobile
- Add overflow-hidden to prevent page scrolling past viewport
- Bots no longer cut off with more canvas space

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-07 21:44:36 +00:00
co-authored by Claude Opus 4.6
parent 5520e0760e
commit 7d251dbd78
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/FightViewer.vue
+5 -5
View File
@@ -399,10 +399,10 @@ async function replay() {
</script>
<template>
<div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2">
<div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2 overflow-hidden">
<!-- 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">
<!-- LEFT: Battle Log — mobile: bottom 50%, desktop: left 38% -->
<div class="flex h-[50%] 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" />
@@ -439,8 +439,8 @@ async function replay() {
</div>
</div>
<!-- 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">
<!-- RIGHT: Game Canvas — mobile: top 50%, desktop: right 62% -->
<div class="h-[50%] 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">