no hand holding

The line under every nav row, the line under every font select, and the caption
under the preview. Each explained a control to somebody who has already found
it, and the caption was wrong as well — there is no Save to press.

The nav rows are one line now, so they centre.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/NavPanel.tsx

@@ -45,7 +45,7 @@ import { pageParam, usePages } from './usePages';
  */
 
 const rowClass = (active: boolean) =>
-  `flex w-full items-start gap-2.5 border-b border-border px-3 py-2.5 text-left transition-colors ${
+  `flex w-full items-center gap-2.5 border-b border-border px-3 py-2.5 text-left transition-colors ${
     active ? 'bg-muted' : 'hover:bg-muted/50'
   }`;
 
@@ -64,7 +64,7 @@ export const NavPanel = () => {
 
     const body = (
       <>
-        <Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+        <Icon className="size-4 shrink-0 text-muted-foreground" />
         <span className="min-w-0 flex-1">
           <span className="flex items-baseline gap-2">
             <span className={`truncate text-sm ${section.built ? '' : 'text-muted-foreground'}`}>{section.label}</span>
@@ -74,9 +74,8 @@ export const NavPanel = () => {
               <span className="text-[10px] tracking-wide text-muted-foreground/70 uppercase">soon</span>
             )}
           </span>
-          <span className="block truncate text-xs text-muted-foreground">{section.hint}</span>
         </span>
-        {locked && <Lock className="mt-0.5 size-3.5 shrink-0 text-muted-foreground/60" />}
+        {locked && <Lock className="size-3.5 shrink-0 text-muted-foreground/60" />}
       </>
     );
 

web/SitePreview.tsx

@@ -352,11 +352,6 @@ export const SitePreview = ({
         </div>
       </div>
 
-      {/* Always, now that editing is the only mode. It says which server this is and at what width,
-          which the device buttons show but the SERVER half of it — dev, not production — they do not. */}
-      <p className="shrink-0 text-[10px] text-muted-foreground">
-        The development server, live at {frameWidth}px. Save to see a change here.
-      </p>
     </section>
   );
 };

web/sections/LayoutPanel.tsx

@@ -71,10 +71,10 @@ type Layout = {
 
 /** The four roles styles.css declares. A template asks for a role; this decides which face plays it. */
 const ROLES = [
-  { key: 'font_title' as const, label: 'Headings', hint: 'Page and section titles' },
+  { key: 'font_title' as const, label: 'Headings' },
-  { key: 'font_body' as const, label: 'Body', hint: 'Paragraphs and most text' },
+  { key: 'font_body' as const, label: 'Body' },
-  { key: 'font_sub' as const, label: 'Menu', hint: 'The navigation and small labels' },
+  { key: 'font_sub' as const, label: 'Menu' },
-  { key: 'font_display' as const, label: 'Display', hint: 'The largest statements' },
+  { key: 'font_display' as const, label: 'Display' },
 ];
 
 /**
@@ -319,11 +319,9 @@ export const LayoutPanel = () => {
             every select, so the row said four times that a font was chosen and never which. Two columns
             give each one room to be read, which is the only thing this control is for.
 
-            The hint moves into the option list's own space rather than a line under each select, which
-            is where the second row of height was really going.
           */}
           <div className="grid grid-cols-2 gap-3">
-            {ROLES.map(({ key, label, hint }) => (
+            {ROLES.map(({ key, label }) => (
               <div key={key} className="flex flex-col gap-1">
                 <label className="text-xs">{label}</label>
                 <select
@@ -342,7 +340,6 @@ export const LayoutPanel = () => {
                     </option>
                   ))}
                 </select>
-                <span className="truncate text-[10px] text-muted-foreground">{hint}</span>
               </div>
             ))}
           </div>