Grammar panel: one flowing line per term so it reads in a narrow column

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/GrammarPanel.jsx

@@ -8,11 +8,11 @@ export default function GrammarPanel({ label, className = '' }) {
     <div className={`rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-2.5 font-sans text-xs ${className}`} aria-label="Grammar">
       <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Grammar · {label}</p>
       {notes.length > 0 && (
-        <dl className="mt-1.5 space-y-1">
+        <ul className="mt-1.5 space-y-1.5">
           {notes.map((n) => (
-            <div key={n.term} className="flex gap-2"><dt className="w-32 shrink-0 font-medium">{n.term}</dt><dd className="text-[var(--r-sub)]">{n.meaning}</dd></div>
+            <li key={n.term}><span className="font-medium">{n.term}.</span> <span className="text-[var(--r-sub)]">{n.meaning}</span></li>
           ))}
-        </dl>
+        </ul>
       )}
     </div>
   );