increase place size

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>