From 7ccaa531e126718e9ee8cd62dfc80c11c9a9ebb9 Mon Sep 17 00:00:00 2001
From: Adrian Rumpold <a.rumpold@gmail.com>
Date: Wed, 21 May 2025 12:46:16 +0200
Subject: [PATCH] Fix overflow on narrow screens

---
 src/App.tsx                                    | 6 +++---
 src/components/GlossaryEntry/GlossaryEntry.css | 4 ----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 201b6aa..c1bee1d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,7 +33,7 @@ function App() {
     });
 
   return (
-    <div>
+    <>
       <StringFilter onChange={setStringFilter} />
       <AlphabeticalFilter onChange={setAlphabeticalFilter} />
       {entries.length} entries found
@@ -45,7 +45,7 @@ function App() {
           onClose={() => setSelectedCitation(null)}
         />
       )}
-      <dl>
+      <dl style={{ maxWidth: "min(100vw, 64ch)" }}>
         {entries.map((term) => (
           <GlossaryEntry
             term={term}
@@ -54,7 +54,7 @@ function App() {
           />
         ))}
       </dl>
-    </div>
+    </>
   );
 }
 export default App;
diff --git a/src/components/GlossaryEntry/GlossaryEntry.css b/src/components/GlossaryEntry/GlossaryEntry.css
index ca63fff..b29c349 100644
--- a/src/components/GlossaryEntry/GlossaryEntry.css
+++ b/src/components/GlossaryEntry/GlossaryEntry.css
@@ -2,10 +2,6 @@ dt {
   font-weight: bold;
 }
 
-dd {
-  max-width: 64ch;
-}
-
 dd + dd {
   margin-top: 1rem;
   border-top: 1px solid var(--color-border);