From 1c6d9202fc14300fa1b2f226458b4049403a2733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Gremaud?= <loic.gremaud@arcanite.ch>
Date: Fri, 23 Oct 2026 20:21:57 +0200
Subject: [PATCH] increase place size

---
 polylan_submitter/src/Place.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/polylan_submitter/src/Place.vue b/polylan_submitter/src/Place.vue
index de852e9..c8122fc 100644
--- a/polylan_submitter/src/Place.vue
+++ b/polylan_submitter/src/Place.vue
@@ -133,7 +133,12 @@ function handleClick(event: MouseEvent) {
 
 <template>
   <div class="flex-1 bg-base-200 flex flex-col items-center px-4 py-8 gap-6">
-    <div class="relative w-full max-w-[512px]" :style="{ aspectRatio: `${gridWidth} / ${gridHeight}` }">
+    <!-- Sized to fill the width, but capped so the full height (minus the
+      navbar and the controls below) still fits in the viewport. -->
+    <div class="relative" :style="{
+      aspectRatio: `${gridWidth} / ${gridHeight}`,
+      width: `min(100%, calc((100dvh - 16rem) * ${gridWidth} / ${gridHeight}))`,
+    }">
       <canvas ref="pixelCanvasRef" :width="gridWidth" :height="gridHeight"
         class="absolute inset-0 w-full h-full border border-base-300 rounded-box shadow-lg" :style="{
           imageRendering: 'pixelated',
@@ -143,10 +148,17 @@ function handleClick(event: MouseEvent) {
         class="absolute inset-0 w-full h-full rounded-box pointer-events-none" />
     </div>
 
-    <div class="flex items-center gap-2">
+    <!-- Timer shares the toggle row so showing it doesn't push the page past
+      the viewport height the grid is sized against. -->
+    <div class="flex items-center gap-4 h-8">
       <button class="btn btn-ghost btn-sm" @click="showGrid = !showGrid">
         {{ showGrid ? t("place.hideGrid") : t("place.showGrid") }}
       </button>
+      <template v-if="onCooldown">
+        <span class="font-bold text-xl tabular-nums">{{ cooldownSecondsDisplay }}s</span>
+        <progress class="progress progress-primary w-48"
+          :value="cooldownDurationSeconds - cooldownRemainingMs / 1000" :max="cooldownDurationSeconds" />
+      </template>
     </div>
 
     <div class="flex flex-wrap justify-center gap-2 max-w-md">
@@ -154,13 +166,5 @@ function handleClick(event: MouseEvent) {
         :class="selectedColorIndex === index ? 'border-primary scale-110' : 'border-base-300'"
         :style="{ backgroundColor: color }" @click="selectedColorIndex = index" />
     </div>
-
-    <div class="flex flex-col items-center gap-2">
-      <span v-if="onCooldown" class="font-bold text-2xl tabular-nums">
-        {{ cooldownSecondsDisplay }}s
-      </span>
-      <progress v-if="onCooldown" class="progress progress-primary w-48"
-        :value="cooldownDurationSeconds - cooldownRemainingMs / 1000" :max="cooldownDurationSeconds" />
-    </div>
   </div>
 </template>