zenno/doc/race: fix mobile

zenno/src/routes/doc/race/+page.svelte

@@ -155,7 +155,7 @@
 	pick?: { len?: boolean; style?: boolean; dist?: boolean; surf?: boolean },
 )}
 	{#if !pick?.len && !pick?.style && !pick?.dist && !pick?.surf}
-		<div class="mb-4 h-60 w-full md:mb-20 md:h-96">
+		<div class="mb-12 h-60 w-full md:mb-20 md:h-96">
 			<StatChart
 				class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
 				{stat}
@@ -166,7 +166,7 @@
 			/>
 		</div>
 	{:else}
-		<div class="mb-24 h-60 w-full md:mb-28 md:h-96">
+		<div class="mb-36 h-60 w-full md:mb-28 md:h-96">
 			<StatChart
 				class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
 				{stat}
@@ -175,10 +175,10 @@
 				{range}
 				plotOptions={{ color: { legend: true } }}
 			/>
-			<div class="mx-auto flex w-full md:max-w-2xl">
+			<div class="mx-auto grid w-full grid-cols-3 gap-y-6 md:max-w-2xl md:grid-cols-7">
 				{#if pick?.len}
 					<input
-						class="my-auto max-w-40 flex-1 md:flex-2"
+						class="col-span-2 my-auto w-full justify-self-center-safe"
 						type="range"
 						id="raceLen"
 						min="1000"
@@ -186,27 +186,26 @@
 						step="100"
 						bind:value={raceLen}
 					/>
-					<span class="my-auto flex-1 pl-2 text-sm">{raceLen}m</span>
+					<span class="col-span-1 my-auto pl-2 text-sm">{raceLen}m</span>
 				{/if}
 				{#if pick?.style}
-					<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="stylePick">Style</label>
+					<select class="col-span-1 my-auto text-sm md:col-span-2" id="stylePick" bind:value={style}>
-					<select class="my-auto flex-1 text-sm" id="stylePick" bind:value={style}>
 						{#each race.RUNNING_STYLES as [name, style] (style)}
 							<option value={style}>{name}</option>
 						{/each}
 					</select>
 				{/if}
 				{#if pick?.dist}
-					<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="distPick">{raceLenType}</label>
+					<label class="col-span-1 my-auto pr-2 text-right text-sm md:inline" for="distPick">{raceLenType}</label>
-					<select class="my-auto flex-1 text-sm" id="distPick" bind:value={distanceApt}>
+					<select class="col-span-1 my-auto text-sm" id="distPick" bind:value={distanceApt}>
 						{#each race.APTITUDE_LEVELS as l (l)}
 							<option value={l}>{race.AptitudeLevel[l]}</option>
 						{/each}
 					</select>
 				{/if}
 				{#if pick?.surf}
-					<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="surfPick">{raceLenType}</label>
+					<label class="col-span-1 my-auto pr-2 text-right text-sm md:inline" for="surfPick">Surface</label>
-					<select class="my-auto flex-1 text-sm" id="surfPick" bind:value={surfaceApt}>
+					<select class="col-span-1 my-auto text-sm" id="surfPick" bind:value={surfaceApt}>
 						{#each race.APTITUDE_LEVELS as l (l)}
 							<option value={l}>{l}</option>
 						{/each}
@@ -276,15 +275,6 @@
 	<Sec h={3} id="acceleration">Acceleration</Sec>
 	<p>Acceleration.</p>
 	{@render statChart(race.Stat.Power, accel, 'Acceleration (m/s²)', [0.1, 0.5])}
-	<div class="mb-4 h-60 w-full md:h-96">
-		<StatChart
-			class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
-			stat={race.Stat.Power}
-			y={accel}
-			yLabel="Acceleration (m/s²)"
-			range={[0.1, 0.5]}
-		/>
-	</div>
 
 	<Sec h={3} id="lane-change-target-speed">Lane Change Target Speed</Sec>
 	<p>Horizontal (rather than forward) target speed of changing lanes.</p>