From 42e3571fab5738e7998ae9e14a236d099688011c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Gremaud?= <loic.gremaud@arcanite.ch>
Date: Sat, 23 May 2026 20:06:17 +0200
Subject: [PATCH] fix(market): better market card display

---
 .../src/components/MarketCard.vue             | 47 ++++++-------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/polylan_submitter/src/components/MarketCard.vue b/polylan_submitter/src/components/MarketCard.vue
index baeae82..01c879c 100644
--- a/polylan_submitter/src/components/MarketCard.vue
+++ b/polylan_submitter/src/components/MarketCard.vue
@@ -137,30 +137,21 @@ onMounted(async () => {
 
     <!-- Options -->
     <div class="card-body py-4">
-      <div class="grid gap-3" :class="market.options.length > 2 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' : 'grid-cols-1 md:grid-cols-2'">
+      <div class="flex flex-col gap-3">
         <div v-for="option in market.options" :key="option.uuid" class="form-control">
-          <label
-            :class="[
-              'label cursor-pointer border rounded-lg p-3 hover:bg-base-200 transition h-full',
-              existingBet && existingBet.option.uuid === option.uuid ? 'border-primary border-2 bg-primary/5' : ''
-            ]"
-          >
+          <label :class="[
+            'label cursor-pointer border rounded-lg p-3 hover:bg-base-200 transition h-full w-full',
+            existingBet && existingBet.option.uuid === option.uuid ? 'border-primary border-2 bg-primary/5' : ''
+          ]">
             <div class="flex flex-col gap-2 flex-1">
               <span class="label-text font-medium">{{ option.text }}</span>
-              <span
-                v-if="existingBet && existingBet.option.uuid === option.uuid"
-                class="badge badge-primary badge-sm w-fit"
-              >
+              <span v-if="existingBet && existingBet.option.uuid === option.uuid"
+                class="badge badge-primary badge-sm w-fit">
                 Your bet: {{ existingBet.amount }} pts
               </span>
             </div>
-            <input
-              type="radio"
-              :value="option.uuid"
-              v-model="selectedOption"
-              class="radio radio-primary"
-              :disabled="market.status !== 'open' || !!(existingBet && existingBet.option.uuid !== option.uuid)"
-            />
+            <input type="radio" :value="option.uuid" v-model="selectedOption" class="radio radio-primary"
+              :disabled="market.status !== 'open' || !!(existingBet && existingBet.option.uuid !== option.uuid)" />
           </label>
         </div>
       </div>
@@ -175,25 +166,16 @@ onMounted(async () => {
             <span v-else>Points to bet</span>
           </span>
         </label>
-        <input
-          v-model.number="betAmount"
-          type="number"
-          :placeholder="existingBet ? `Enter amount to increase by` : 'Enter points'"
-          class="input input-bordered"
-          min="1"
-          :disabled="loading"
-        />
+        <input v-model.number="betAmount" type="number"
+          :placeholder="existingBet ? `Enter amount to increase by` : 'Enter points'" class="input input-bordered"
+          min="1" :disabled="loading" />
 
         <div v-if="error" class="alert alert-error">
           <i class="mdi mdi-alert-circle"></i>
           <span>{{ error }}</span>
         </div>
 
-        <button
-          @click="placeBet"
-          :disabled="!canBet || loading"
-          class="btn btn-primary"
-        >
+        <button @click="placeBet" :disabled="!canBet || loading" class="btn btn-primary">
           <span v-if="loading" class="loading loading-spinner loading-sm"></span>
           <span v-else-if="existingBet">Increase Bet</span>
           <span v-else>Place Bet</span>
@@ -217,7 +199,8 @@ onMounted(async () => {
     <!-- Result -->
     <div v-else-if="market.status === 'resolved' && market.winning_option" class="card-body py-4 bg-base-200">
       <div class="text-sm">
-        <div class="font-semibold" :class="existingBet && existingBet.option.uuid === market.winning_option.uuid ? 'text-success' : 'text-error'">
+        <div class="font-semibold"
+          :class="existingBet && existingBet.option.uuid === market.winning_option.uuid ? 'text-success' : 'text-error'">
           <span v-if="existingBet && existingBet.option.uuid === market.winning_option.uuid">✓ You Won!</span>
           <span v-else-if="existingBet">✗ You Lost</span>
           <span v-else>Resolved</span>