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> </script>
<template> <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% --> <!-- LEFT: Battle Log — mobile: bottom 50%, 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="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"> <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-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-yellow" />
@@ -439,8 +439,8 @@ async function replay() {
</div> </div>
</div> </div>
<!-- RIGHT: Game Canvas — mobile: top 30%, desktop: right 62% --> <!-- RIGHT: Game Canvas — mobile: top 50%, 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"> <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 --> <!-- 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"> <div class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
frontend/src/pages/FightPage.vue
+5 -5
View File
@@ -655,11 +655,11 @@ function stopAutoBattle() {
</div> </div>
<!-- LIVE HUMAN FIGHT: full arena view with input --> <!-- LIVE HUMAN FIGHT: full arena view with input -->
<div v-else-if="isLive && isHumanFight" class="flex-1 flex flex-col lg:flex-row gap-1 sm:gap-2 min-h-0"> <div v-else-if="isLive && isHumanFight" class="flex-1 flex flex-col lg:flex-row gap-1 sm:gap-2 min-h-0 overflow-hidden">
<!-- Battle Log + Human Input — mobile: bottom 70%, desktop: left 38% --> <!-- Battle Log + Human Input — mobile: bottom 50%, desktop: left 38% -->
<div class="flex flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden <div class="flex flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden
h-[70%] lg:h-auto lg:w-[38%] order-2 lg:order-1"> h-[50%] lg:h-auto lg:w-[38%] 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"> <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-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-yellow" />
@@ -777,8 +777,8 @@ function stopAutoBattle() {
</div> </div>
</div> </div>
<!-- Game Canvas — mobile: top 30%, desktop: right 62% --> <!-- Game Canvas — mobile: top 50%, 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"> <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 --> <!-- Health bars -->
<div v-if="liveFightData?.botA" class="px-2 sm:px-3 py-1 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0"> <div v-if="liveFightData?.botA" class="px-2 sm:px-3 py-1 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">