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>
-                        <label>
+                    <div class="windControlRow">
+                        <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
-        </div>
-        <div>
+        </label>
+        <label class="windField">
+            <span>Wind speed</span>
             <input
                 type="text"
+                value={getSpeed()}
+                placeholder="e.g. 2–6"
                 onInput={e => setSpeed(e.target.value)}
             />
-            Wind speed
-        </div>
-        <div>
+        </label>
+        <label class="windField">
+            <span>Gusts</span>
             <input
                 type="text"
+                value={getGusts()}
+                placeholder="e.g. 5–10"
                 onInput={e => setGusts(e.target.value)}
             />
-            Gusts
-        </div>
+        </label>
     </>
     );
-}
+}