CLAUDE: Add responsive layout - stack pitcher/batter on mobile with pitcher on top

This commit is contained in:
Cal Corum 2026-02-06 19:53:56 -06:00
parent 45098955f1
commit 05d34f5b4f

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="current-situation"> <div class="current-situation">
<!-- Side-by-Side Card Layout --> <!-- Side-by-Side Card Layout (stacked on mobile) -->
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Current Batter Card (LEFT) --> <!-- Current Batter Card (LEFT on desktop, BOTTOM on mobile) -->
<button <button
v-if="currentBatter" v-if="currentBatter"
:class="[ :class="[
'player-card batter-card card-transition', 'player-card batter-card card-transition order-2 md:order-1',
batterCardClasses batterCardClasses
]" ]"
@click="openPlayerCard('batter')" @click="openPlayerCard('batter')"
@ -34,11 +34,11 @@
</div> </div>
</button> </button>
<!-- Current Pitcher Card (RIGHT) --> <!-- Current Pitcher Card (RIGHT on desktop, TOP on mobile) -->
<button <button
v-if="currentPitcher" v-if="currentPitcher"
:class="[ :class="[
'player-card pitcher-card card-transition', 'player-card pitcher-card card-transition order-1 md:order-2',
pitcherCardClasses pitcherCardClasses
]" ]"
@click="openPlayerCard('pitcher')" @click="openPlayerCard('pitcher')"