From c271f496940ca2b9c2fd16396cdd80022725bca4 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Wed, 14 Oct 2026 15:28:07 -0400
Subject: [PATCH] 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 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/GrammarPanel.jsx b/src/components/GrammarPanel.jsx
index d877652..99557ed 100644
--- a/src/components/GrammarPanel.jsx
+++ b/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>
   );