Tighten elevation spacing and keep estimate guidance with results

apps/embed/Widget.svelte

@@ -203,7 +203,7 @@
     />
   </details>
   <footer>
-    <p>Converted times are estimates. Meet rules decide entry eligibility.</p>
+    <p>Converted times are estimates. Check your meet’s entry rules.</p>
     <div>
       <a
         href={selectedMethod.source.url}

docs/screenshots/converter-review.json

@@ -1,17 +1,17 @@
 {
-  "capturedAt": "2026-10-20T01:17:56.801729+00:00",
-  "branch": "feat/altitude-ui-parity",
-  "sourceBase": "f1e9a848043f8d2bec71cd694195bd28ff0c4e2b",
+  "capturedAt": "2026-10-20T01:34:31.151424+00:00",
+  "branch": "fix/elevation-field-spacing",
+  "sourceBase": "f46de98bb0325af7e28da5b495a83539d4749eff",
   "sourceHashes": {
-    "src/App.svelte": "38c4899683ac9f225f26ebef734aef5068567e43fca8df9f3565bbda9a5fd49f",
-    "src/converter.css": "e19cb04e04a0cbb06f4e36c330dee4249ff720a371fd77fc85a40fba300117c7",
+    "src/App.svelte": "71c0c5bd44c81c0398281a8d193b58a5a8c33ca312166e76760cad8820ebac07",
+    "src/converter.css": "e1e50d8b674acb4256dc15d378574146dc9a0e8185be759bdde5ce54b48ffce7",
     "src/app.css": "76f7065b58be4f721825dbf92434b1a9eb21e3d923ef57648502c6cbf3e79bf1",
     "design/turnmark.tokens.json": "aeaddebc1caadbbd96ba58e1d26bd0073b02ee78f4537f41c554a60c5b0d7634",
     "public/images/water-ribbons.webp": "00c268a88616c4bf1402ef8153547966821e95ebc5bedf83a7f80e6a4ebbb447",
     "src/lib/MethodComparison.svelte": "d43a0d4ca89516d4b8c2ed44ff4d07b11e539b45724bde330c7d5c04a012c19a",
     "src/lib/AltitudeComparison.svelte": "c1d1213e45f58f6209ca47173ae4a442477877da94ca2a6efc70ff8acb46dd06",
     "src/lib/AltitudeControls.svelte": "76a98326d9789bbece2d64b6dd39e8d1e066416839266a005e711ba411edfb7b",
-    "apps/embed/Widget.svelte": "0b1ecd2f2ad937ef646b312504ba39683ea1f0db6f94f53b783bb8dd2a822290",
+    "apps/embed/Widget.svelte": "769c0833220be23122e60b02407df9e5833343a763ac5c54af4f3fd4c75428d3",
     "packages/mcp/ui/app.ts": "4648b2250a0da4eb96052d769d683b0e6d021753ccdeb193387ec9e54c951985",
     "apps/ios/Sources/TurnmarkApp.swift": "4d2b488edef9fcaf07f5117836c4b22992800ae7005cc8de1d76ae794bf24dad",
     "apps/android/src/main/java/net/stanback/turnmark/MainActivity.kt": "09a817234a93a8903efc943eb7be8eb0de14ee524ad8cde50dd69f8c49357cd3",
@@ -21,43 +21,43 @@
   "captures": [
     {
       "file": "web-converter-comparison-dark.png",
-      "sha256": "c99044c87234b9004786ba898f1cabb3aef787ecc1fc13e1490f0c87f322f491"
+      "sha256": "05ab75ee64e54fe4b698b91f89eba049ae70e168bc0521fd3239790ee3b00873"
     },
     {
       "file": "web-converter-desktop-layout-dark.png",
-      "sha256": "cedff30c6a4d63046bd13797c9677074250ea6f4135aba97ece04fe5fc45f196"
+      "sha256": "ed2b31811007586333f7a9bccfc82862005d7d937d00b4fb9da281ecc9c65060"
     },
     {
       "file": "web-converter-method-dark.png",
-      "sha256": "b359c0e6f6b8e7297bd11280f12655da865559f39c9f53dc4a61157db678a24e"
+      "sha256": "62bdf14be5cc657196f2138fb5adaca6f1a564312423a79179e36e4fa1284e9c"
     },
     {
       "file": "web-converter-comparison-light.png",
-      "sha256": "daa1828d4d5818b8639578315bdcd2904d2b4d3f6e93228c7e3b17231a23f347"
+      "sha256": "2788f4491abeed12a997ec6fbf30e8a4a7422cd4b0730e59c66c117a00201f7a"
     },
     {
       "file": "web-converter-empty-mobile.png",
-      "sha256": "6d24c613ae75b85a7d0a1aab27fb3a0d9fcfb15f261f745f263ab9177a0e189a"
+      "sha256": "42e59c3eb2f626bad937c2301c9e69aa858c2c4621b29b0c4eb8c69e263622b8"
     },
     {
       "file": "web-converter-comparison-mobile.png",
-      "sha256": "8218ff2de04de345fc60427a172a36bc6ab275c1c0abd9b4cadc1941f78cec7c"
+      "sha256": "e8d555bad03900b345d81a7715ea106875e548a123030e8afa1bc4fd76bc1618"
     },
     {
       "file": "web-converter-results-mobile.png",
-      "sha256": "e13da7c33ab0d4af0f903fc3efe2e7c169005fc141588d4d3f727dc5932b0609"
+      "sha256": "daa953f8571b1e0cd8b5caf5b3757a9528a31fa1d37c5c95a28668b00afb259e"
     },
     {
       "file": "web-converter-method-mobile.png",
-      "sha256": "24ca834859c5f85177a61d1d6c4b3882b7c65fb53d8b18e28d8abb49f507f852"
+      "sha256": "fffd64d8c74de6cfd44558aefec71686392839949edec4ac8da79ba688519e4d"
     },
     {
       "file": "web-converter-large-text.png",
-      "sha256": "f6d07b235d50bfe3b8715d58ea08dbd67156f3ec7eee26fab0e46133509f421f"
+      "sha256": "d86ee2c791470f6c97c7e23926ad9ab33cf5bc15513f4cdcb557c26227d771cd"
     },
     {
       "file": "web-altitude-settings.png",
-      "sha256": "685e437753cb5a78b650feffa952e2c633a704b1acbec4668dc360c1c0bb1b1e"
+      "sha256": "ad45d7a9732cd36af7c1210a98bbc6163b924dc92f692d413c7597e0e88573d5"
     },
     {
       "file": "widget-altitude-settings-dark.png",
@@ -129,6 +129,8 @@
     "Long calculation-disclosure content crop omits fixed mobile navigation and transient toast; regular phone captures retain navigation.",
     "Altitude policy settings are compact; full USA Swimming/NCAA comparison appears once in calculation details.",
     "Native screenshots come from the 24-case iOS and 27-case Android builds; UI animation is disabled only by the DEBUG test harness.",
-    "Calculation options groups separate course-conversion and optional altitude-policy controls on web, native, widget and MCP. Native settings captures include the enabled restored policy."
+    "Calculation options groups separate course-conversion and optional altitude-policy controls on web, native, widget and MCP. Native settings captures include the enabled restored policy.",
+    "Web elevation label/unit controls and input share an 8 px field gap. Helper copy explains the adjustment without an unlabeled alternate-unit equivalent.",
+    "The entry-eligibility reminder appears beside valid conversion results instead of in the input form."
   ]
 }

src/App.svelte

@@ -723,36 +723,38 @@
                 />Adjust for altitude</label
               >
               {#if altitudeEnabled}<div class="altitude-body">
-                  <div class="elevation-heading">
-                    <label for="altitude">Pool elevation</label>
-                    <div
-                      class="elevation-units"
-                      role="group"
-                      aria-label="Elevation units"
-                    >
-                      <button
-                        class:active={elevationUnit === "ft"}
-                        aria-pressed={elevationUnit === "ft"}
-                        onclick={() => (elevationUnit = "ft")}>ft</button
-                      >
-                      <button
-                        class:active={elevationUnit === "m"}
-                        aria-pressed={elevationUnit === "m"}
-                        onclick={() => (elevationUnit = "m")}>m</button
+                  <div class="elevation-field">
+                    <div class="elevation-heading">
+                      <label for="altitude">Pool elevation</label>
+                      <div
+                        class="elevation-units"
+                        role="group"
+                        aria-label="Elevation units"
                       >
+                        <button
+                          class:active={elevationUnit === "ft"}
+                          aria-pressed={elevationUnit === "ft"}
+                          onclick={() => (elevationUnit = "ft")}>ft</button
+                        >
+                        <button
+                          class:active={elevationUnit === "m"}
+                          aria-pressed={elevationUnit === "m"}
+                          onclick={() => (elevationUnit = "m")}>m</button
+                        >
+                      </div>
+                    </div>
+                    <div class="elevation-entry">
+                      <input
+                        type="number"
+                        id="altitude"
+                        min="0"
+                        max={elevationUnit === "ft" ? 20000 : 6096}
+                        step={elevationUnit === "ft" ? 1 : "any"}
+                        bind:value={() => elevationInput, setElevation}
+                        aria-invalid={!altitudeValid}
+                        aria-describedby="elevation-help"
+                      /><span>{elevationUnit} above sea level</span>
                     </div>
-                  </div>
-                  <div class="elevation-entry">
-                    <input
-                      type="number"
-                      id="altitude"
-                      min="0"
-                      max={elevationUnit === "ft" ? 20000 : 6096}
-                      step={elevationUnit === "ft" ? 1 : "any"}
-                      bind:value={() => elevationInput, setElevation}
-                      aria-invalid={!altitudeValid}
-                      aria-describedby="elevation-help"
-                    /><span>{elevationUnit} above sea level</span>
                   </div>
                   <div class="altitude-policy-field">
                     <label class="field-label" for="altitude-policy"
@@ -769,9 +771,6 @@
                     >
                   </div>
                   <p id="elevation-help">
-                    {#if altitudeValid}{elevationUnit === "ft"
-                        ? `${(form.altitude * 0.3048).toLocaleString(undefined, { maximumFractionDigits: 1 })} meters`
-                        : `${form.altitude.toLocaleString()} feet (rounded to the nearest foot)`}.{/if}
                     {#if adjustment}Altitude adjustment: −{adjustment.toFixed(
                         2,
                       )}s before course conversion.
@@ -786,11 +785,6 @@
             </section>
           </div>
         </details>
-        <div class="input-footnote">
-          <Icon name="info" size={14} /><span
-            >Estimates for perspective. Meet rules decide entry eligibility.</span
-          >
-        </div>
         <button
           class="primary-button mobile-results-jump"
           disabled={!!error}
@@ -947,6 +941,9 @@
             </button>
           {/each}
         </div>
+        {#if time !== null && !error}<p class="result-note">
+            Converted times are estimates. Check your meet’s entry rules.
+          </p>{/if}
         <details class="result-method">
           <summary>
             <span><Icon name="info" size={15} />How this is calculated</span>

src/converter.css

@@ -493,6 +493,13 @@
   gap: 16px;
   padding-block: 8px 20px;
 }
+.altitude-body .elevation-field {
+  display: grid;
+  gap: var(--tm-space-8);
+}
+.altitude-body .elevation-heading {
+  margin-bottom: 0;
+}
 .altitude-policy-field {
   display: grid;
   gap: 8px;
@@ -528,17 +535,12 @@
   margin: 0;
   color: var(--muted);
 }
-.input-footnote {
-  display: flex;
-  gap: 8px;
+.result-note {
   margin-top: 18px;
   font-size: 13px;
   line-height: 1.6;
   color: var(--muted);
 }
-.input-footnote svg {
-  margin-top: 3px;
-}
 .results-heading {
   display: flex;
   align-items: center;