Arrange wind controls horizontally

web/src/components/map/MapView.tsx

@@ -107,17 +107,17 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
             <div class="mapControlSections">
                 <section class="valueControls">
                     <strong>Value and wind settings</strong>
-                    <div>
+                    <div class="windControlRow">
-                        <label>
+                        <label class="roundControl">
                             <input
                                 type="checkbox"
                                 checked={windSignals.roundValues[0]()}
                                 onChange={e => windSignals.roundValues[1](e.target.checked)}
                             />
-                            Round values
+                            <span>Round temperatures</span>
                         </label>
+                        { props.showWind && <WindInputs signals={windSignals} /> }
                     </div>
-                    { props.showWind && <WindInputs signals={windSignals} /> }
                 </section>
                 {mode === "faktiska" && <IconInputs cities={data().map(([city]) => city)} weatherIconsSignal={weatherIconsSignal} />}
             </div>

web/src/components/map/WindInputs.tsx

@@ -12,32 +12,37 @@ export const WindInputs: Component<{signals: WindSignals}> = (
         direction: [getDirection, setDirection], 
         speed: [getSpeed, setSpeed],
         gusts: [getGusts, setGusts],
-        roundValues: [getRoundValues, setRoundValues],
     }}
 ) => {
     return (
     <>
-        <div>
+        <label class="windField">
+            <span>Wind direction</span>
             <input
                 type="text"
+                value={getDirection()}
+                placeholder="e.g. ZA"
                 onInput={e => setDirection(e.target.value)}
             />
-            Wind direction
+        </label>
-        </div>
+        <label class="windField">
-        <div>
+            <span>Wind speed</span>
             <input
                 type="text"
+                value={getSpeed()}
+                placeholder="e.g. 2–6"
                 onInput={e => setSpeed(e.target.value)}
             />
-            Wind speed
+        </label>
-        </div>
+        <label class="windField">
-        <div>
+            <span>Gusts</span>
             <input
                 type="text"
+                value={getGusts()}
+                placeholder="e.g. 5–10"
                 onInput={e => setGusts(e.target.value)}
             />
-            Gusts
+        </label>
-        </div>
     </>
     );
 }

web/src/css/aggregator.css

@@ -13,7 +13,7 @@
     font-size: 11px;
 }
 .overlayFields{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,1fr);gap:12px;padding:16px 16px 0}.overlayFields label,.overlayFields span{display:block}.overlayFields span{margin-bottom:6px;font-size:12px;font-weight:700}.overlayFields input{width:100%}
-.mapControlSections{display:grid;gap:18px;padding:16px}.valueControls{padding-bottom:16px;border-bottom:1px solid var(--border)}
+.mapControlSections{display:grid;gap:18px;padding:16px}.valueControls{padding-bottom:16px;border-bottom:1px solid var(--border)}.windControlRow{display:grid;grid-template-columns:minmax(170px,.8fr) repeat(3,minmax(180px,1fr));gap:14px;align-items:end;margin-top:10px}.roundControl{display:flex;align-items:center;gap:8px;min-height:40px}.windField{display:grid;gap:6px}.windField span{font-size:12px;font-weight:700;color:var(--text-muted)}.windField input{width:100%;min-width:0}@media(max-width:900px){.windControlRow{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.windControlRow{grid-template-columns:1fr}}
 
 .pageWorkspace{max-width:1800px;margin:auto;padding:34px 28px 70px}.pageHeading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.pageHeading h1{margin:5px 0 6px;font-size:34px}.pageHeading p{margin:0;color:var(--text-muted)}.selectionCount{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-weight:700}.aggregator>.cityWorkspace{display:grid;grid-template-columns:240px 300px minmax(0,1fr);gap:18px;align-items:start}.panel{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.panel h2{margin:0 0 18px;font-size:16px}.cityPanel{max-height:calc(100vh - 160px);overflow:auto}.cityPanel ul{margin:12px 0;padding:0;columns:1}.cityPanel li{padding:3px 0}.queryPanel h4{margin:22px 0 9px}.queryPanel p{margin:10px 0}.resultsPanel{min-width:0}.emptyState{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-top:18px;padding:30px;border:1px dashed #bac6d4;border-radius:16px;background:rgba(255,255,255,.55);color:var(--text-muted);text-align:center}.emptyState strong{color:var(--text);font-size:18px}.mapWorkspace{margin-top:14px}.mapToolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.mapToolbar strong,.mapToolbar span{display:block}.mapToolbar span{margin-top:3px;color:var(--text-muted);font-size:12px}.broadcastControls{margin-bottom:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.broadcastControls summary{padding:14px 16px;cursor:pointer}.broadcastControls summary span,.broadcastControls summary strong,.broadcastControls summary small{display:block}.broadcastControls summary small,.controlHelp,.fieldHint{color:var(--text-muted);font-size:12px}.broadcastControls[open] summary{border-bottom:1px solid var(--border)}.broadcastControls .grid-1-2{padding:16px}.controlHelp{margin:16px 16px 0}.canvasFrame{overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#d8dee6;box-shadow:var(--shadow-sm)}.canvasFrame canvas{display:block}.weatherIconButton{border-radius:7px}.fieldHint{margin:4px 0 10px}@media(max-width:1200px){.aggregator>.cityWorkspace{grid-template-columns:220px 1fr}.resultsPanel{grid-column:1/-1}.cityPanel{max-height:none}}@media(max-width:700px){.pageWorkspace{padding:24px 14px}.pageHeading{align-items:start;flex-direction:column}.aggregator>.cityWorkspace{grid-template-columns:1fr}.resultsPanel{grid-column:auto}}