Align model row and settings controls

static/index.html

@@ -24,7 +24,9 @@
   </header>
 
   <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
-    <img id="model-logo" class="model-logo" width="42" height="42" alt="" aria-hidden="true">
+    <span class="model-logo-frame" aria-hidden="true">
+      <img id="model-logo" class="model-logo" width="60" height="63" alt="">
+    </span>
     <div class="model-copy">
       <span class="model-kicker">Model</span>
       <div class="model-name-row">
@@ -58,21 +60,23 @@
 
         <div class="input-meta"><span id="count">0 characters</span><span>Checks after 650 ms</span></div>
 
-        <details class="settings-menu">
-          <summary>Advanced settings</summary>
-          <div class="settings-grid" aria-label="Correction settings">
-            <label class="setting-card" for="mep">
-              <span class="setting-copy"><span>Confidence threshold</span><output id="mepv" for="mep">0.00</output></span>
-              <input type="range" id="mep" min="0" max="1" step="0.05" value="0">
-              <span class="setting-scale"><span>More corrections</span><span>More precise</span></span>
-            </label>
-            <label class="setting-card" for="mit">
-              <span class="setting-copy"><span>Correction passes</span><output id="mitv" for="mit">3</output></span>
-              <input type="range" id="mit" min="1" max="5" step="1" value="3">
-              <span class="setting-scale"><span>1 pass</span><span>5 passes</span></span>
-            </label>
-          </div>
-        </details>
+        <details class="settings-menu">
+          <summary>Advanced settings</summary>
+          <div class="settings-reveal">
+            <div class="settings-grid" aria-label="Correction settings">
+              <label class="setting-card" for="mep">
+                <span class="setting-copy"><span>Confidence threshold</span><output id="mepv" for="mep">0.00</output></span>
+                <input type="range" id="mep" min="0" max="1" step="0.05" value="0">
+                <span class="setting-scale"><span>More corrections</span><span>More precise</span></span>
+              </label>
+              <label class="setting-card" for="mit">
+                <span class="setting-copy"><span>Correction passes</span><output id="mitv" for="mit">3</output></span>
+                <input type="range" id="mit" min="1" max="5" step="1" value="3">
+                <span class="setting-scale"><span>1 pass</span><span>5 passes</span></span>
+              </label>
+            </div>
+          </div>
+        </details>
       </article>
 
       <article class="workspace-card output-panel">
@@ -105,10 +109,54 @@
       <div class="example-list" id="examples"></div>
     </section>
   </main>
-</div>
-
-<script>
-const EXAMPLES = [
+</div>
+
+<script>
+{
+  const settingsMenu = document.querySelector(".settings-menu");
+  const settingsSummary = settingsMenu.querySelector("summary");
+  const settingsReveal = settingsMenu.querySelector(".settings-reveal");
+  settingsSummary.setAttribute("aria-expanded", "false");
+
+  settingsSummary.addEventListener("click", async (event) => {
+    event.preventDefault();
+    if (settingsMenu.dataset.animating === "true") return;
+
+    const opening = !settingsMenu.open;
+    const duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+    if (!settingsReveal.animate || duration === 0) {
+      settingsMenu.open = opening;
+      settingsSummary.setAttribute("aria-expanded", String(opening));
+      return;
+    }
+
+    settingsMenu.dataset.animating = "true";
+    if (opening) settingsMenu.open = true;
+    settingsSummary.setAttribute("aria-expanded", String(opening));
+
+    const expandedHeight = settingsReveal.scrollHeight;
+    const animation = settingsReveal.animate(
+      opening
+        ? [
+            { height: "0px", opacity: 0, transform: "translateY(-6px)" },
+            { height: `${expandedHeight}px`, opacity: 1, transform: "translateY(0)" },
+          ]
+        : [
+            { height: `${settingsReveal.getBoundingClientRect().height}px`, opacity: 1, transform: "translateY(0)" },
+            { height: "0px", opacity: 0, transform: "translateY(-6px)" },
+          ],
+      { duration, easing: "cubic-bezier(.2,.8,.2,1)" },
+    );
+
+    try { await animation.finished; } catch (_) {}
+    if (!opening) settingsMenu.open = false;
+    delete settingsMenu.dataset.animating;
+  });
+}
+</script>
+
+<script>
+const EXAMPLES = [
   { label:"Agreement", text:"Their are many reason to study hard." },
   { label:"Verb forms", text:"I has went to the stor yesterday." },
   { label:"Pronouns", text:"Me and him was late for the meetting." },

static/style.css

@@ -53,11 +53,11 @@ h1 em { color:var(--purple); font-weight:400; font-style:italic; }
 .sub { max-width:900px; margin:0; color:var(--neutral-500); font-size:15px; line-height:1.45; }
 .sub strong { color:var(--neutral-700); font-weight:600; }
 
-.model-strip {
-  display:grid;
-  grid-template-columns:46px auto minmax(240px,1fr);
-  align-items:center;
-  gap:14px;
+.model-strip {
+  display:grid;
+  grid-template-columns:42px 280px minmax(240px,1fr);
+  align-items:center;
+  column-gap:16px;
   min-height:76px;
   padding:12px 30px;
   border-top:1px solid var(--border);
@@ -65,19 +65,24 @@ h1 em { color:var(--purple); font-weight:400; font-style:italic; }
   background:linear-gradient(90deg,rgba(108,79,224,.018),rgba(205,130,240,.035),rgba(108,79,224,.018));
   transition:background .3s ease;
 }
+.model-logo-frame { position:relative; display:block; width:42px; height:42px; overflow:hidden; }
 .model-logo {
+  position:absolute;
+  top:50%;
+  left:50%;
   display:block;
-  width:42px;
-  height:42px;
-  object-fit:contain;
+  width:60px;
+  height:auto;
+  max-width:none;
+  transform:translate(-50%,-50%);
   image-rendering:pixelated;
 }
-.model-copy { display:flex; min-width:210px; flex-direction:column; align-items:flex-start; }
-.model-kicker { color:var(--neutral-500); font:600 10px/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
-.model-name-row { display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
-.model-copy a { font:400 22px/1.15 var(--serif); text-decoration:none; }
-.model-copy a:hover { color:var(--purple); }
-.model-variant { display:inline-flex; padding:3px 6px; border:1px solid rgba(108,79,224,.14); border-radius:999px; background:rgba(108,79,224,.05); color:var(--purple); font:700 9px/1 var(--mono); letter-spacing:.035em; text-transform:uppercase; }
+.model-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; }
+.model-kicker { color:var(--neutral-500); font:600 10px/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
+.model-name-row { display:flex; min-height:25px; align-items:center; gap:10px; white-space:nowrap; }
+.model-copy a { font:400 22px/1.15 var(--serif); text-decoration:none; }
+.model-copy a:hover { color:var(--purple); }
+.model-variant { display:inline-flex; height:18px; align-items:center; box-sizing:border-box; padding:0 7px; border:1px solid rgba(108,79,224,.14); border-radius:999px; background:rgba(108,79,224,.05); color:var(--purple); font:700 9px/1 var(--mono); letter-spacing:.035em; text-transform:uppercase; }
 .load-block { min-width:0; }
 .load-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; color:var(--neutral-500); font-size:12px; font-weight:600; }
 #load-percent { font:600 11px/1 var(--mono); font-variant-numeric:tabular-nums; }
@@ -119,14 +124,15 @@ main { display:flex; min-height:0; flex:0 0 auto; flex-direction:column; margin-
 .is-complete .output-stage { animation:editor-complete .62s ease both; }
 
 .input-meta { display:flex; justify-content:space-between; gap:14px; margin:8px 2px 0; color:var(--neutral-300); font:500 10px/1.3 var(--mono); }
-.settings-menu { margin-top:12px; }
+.settings-menu { margin-top:auto; padding-top:12px; }
 .settings-menu > summary { display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; gap:14px; height:54px; min-height:54px; padding:0 13px; border:1px solid var(--border); border-radius:10px; background:var(--neutral-50); color:var(--neutral-500); font:600 10px/1.25 var(--mono); letter-spacing:.055em; text-transform:uppercase; cursor:pointer; list-style:none; transition:border-color .16s,background .16s,color .16s; }
 .settings-menu > summary::-webkit-details-marker { display:none; }
 .settings-menu > summary::after { content:"+"; flex:none; color:var(--purple); font:500 20px/1 var(--sans); transition:transform .2s ease; }
 .settings-menu > summary:hover { border-color:rgba(108,79,224,.28); background:rgba(108,79,224,.025); color:var(--neutral-700); }
-.settings-menu[open] > summary { border-radius:10px 10px 0 0; color:var(--neutral-700); }
-.settings-menu[open] > summary::after { transform:rotate(45deg); }
-.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; background:var(--neutral-50); }
+.settings-menu[open] > summary { border-radius:10px 10px 0 0; color:var(--neutral-700); }
+.settings-menu[open] > summary::after { transform:rotate(45deg); }
+.settings-reveal { overflow:hidden; }
+.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; border:1px solid var(--border); border-top:0; border-radius:0 0 10px 10px; background:var(--neutral-50); }
 .setting-card { display:block; min-width:0; padding:12px 13px 9px; border:1px solid var(--border); border-radius:10px; background:var(--neutral-50); }
 .setting-copy { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--neutral-500); font:600 10px/1.25 var(--mono); letter-spacing:.055em; text-transform:uppercase; }
 .setting-copy output { color:var(--purple); font:700 12px/1 var(--mono); letter-spacing:0; font-variant-numeric:tabular-nums; }
@@ -153,7 +159,7 @@ mark::after { content:""; position:absolute; z-index:-1; top:18%; bottom:12%; le
 .legend-swatch { width:12px; height:8px; border-radius:2px; }
 .legend-swatch.modified { background:rgba(205,130,240,.42); }
 .legend-swatch.removed { background:rgba(228,84,84,.11); border-bottom:1px solid var(--red); }
-.stats-grid { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:8px; margin-top:5px; }
+.stats-grid { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:8px; margin-top:auto; }
 .stat-card { min-width:0; height:54px; min-height:54px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--paper); }
 .stat-card span { display:block; margin-bottom:5px; color:var(--neutral-500); font:600 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
 .stat-card strong { display:block; overflow:hidden; color:var(--neutral-700); font:650 14px/1.25 var(--sans); text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
@@ -191,19 +197,23 @@ mark::after { content:""; position:absolute; z-index:-1; top:18%; bottom:12%; le
   .wrap { width:100%; border:0; }
   .site-intro { padding:20px; }
   h1 { font-size:40px; }
-  .sub { font-size:14px; }
-  .model-strip { grid-template-columns:42px 1fr; padding:12px 20px; }
-  .load-block { grid-column:1/-1; }
+  .sub { font-size:14px; }
+  .model-strip { grid-template-columns:42px minmax(0,1fr); column-gap:16px; row-gap:10px; padding:12px 20px; }
+  .model-copy { min-width:0; }
+  .load-block { grid-column:1/-1; }
   main { padding:15px 20px 20px; }
   .examples-panel { align-items:flex-start; flex-direction:column; }
 }
-@media (max-width:520px) {
+@media (max-width:520px) {
   .workspace-card { padding:16px; }
   .settings-grid,.stats-grid { grid-template-columns:1fr 1fr; }
   .panel-header { align-items:flex-start; flex-direction:column; }
   .output-heading { flex-direction:row; }
-  .input-meta { align-items:flex-start; flex-direction:column; gap:3px; }
-}
+  .input-meta { align-items:flex-start; flex-direction:column; gap:3px; }
+}
+@media (max-width:470px) {
+  .model-name-row { align-items:flex-start; flex-direction:column; gap:2px; }
+}
 @media (prefers-reduced-motion:reduce) {
   *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
 }