reducer list: blurb spans full width on narrow viewports

app/web/static/style.css

@@ -346,6 +346,24 @@ select {
   align-self: start;
 }
 
+/* Narrow viewports: let the blurb span full width under the name/pkg row
+   instead of getting crammed into the middle column. */
+@media (max-width: 780px) {
+  .reducer-list label {
+    grid-template-columns: 1.4rem 1fr auto;
+    grid-template-areas:
+      "mark name  pkg"
+      "mark blurb blurb";
+    column-gap: 0.6rem;
+    row-gap: 2px;
+  }
+  .reducer-list .mark  { grid-area: mark; }
+  .reducer-list .pkg   { grid-area: pkg; }
+  .reducer-list .text  { display: contents; }
+  .reducer-list .name  { grid-area: name; }
+  .reducer-list .blurb { grid-area: blurb; }
+}
+
 /* advanced disclosure */
 details.advanced {
   margin-top: 0.8rem;

app/web/templates/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>embedding notebook</title>
-  <link rel="stylesheet" href="/static/style.css?v=17" />
+  <link rel="stylesheet" href="/static/style.css?v=18" />
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <script type="importmap">
   {
@@ -260,7 +260,7 @@
                    hx-trigger="change" />
             <label for="red-{{ loop.index }}">
               <span class="mark">{{ "%02d"|format(loop.index) }}</span>
-              <span>
+              <span class="text">
                 <span class="name">{{ r.label }}</span>
                 <span class="blurb">{{ r.blurb }}</span>
               </span>