From aa5ad46c1b2253540850fe277ec2200545b496f6 Mon Sep 17 00:00:00 2001
From: Dominik Natter <dominik.natter@nattergroup.com>
Date: Fri, 28 Mar 2025 11:48:56 +0100
Subject: [PATCH] fix Stats spacing to always have the same space

---
 src/components/LetterDensity.tsx | 54 +++++++++++++++++++++++---------
 src/components/WordDensity.tsx   | 50 ++++++++++++++++++++---------
 2 files changed, 75 insertions(+), 29 deletions(-)

diff --git a/src/components/LetterDensity.tsx b/src/components/LetterDensity.tsx
index 94dc875..a7a9568 100644
--- a/src/components/LetterDensity.tsx
+++ b/src/components/LetterDensity.tsx
@@ -13,34 +13,58 @@ export default function LetterDensity({ density }: LetterDensityProps) {
 
     return (
         <div className="h-auto w-full pt-8">
+
+
             <h2 className="text-2xl">Letter Density</h2>
-            <div className="flex flex-col py-4 gap-2">
+            <table className="w-full table-auto border-separate border-spacing-y-2">
+                <thead>
+                <tr>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
                 {firstFive.map(([letter, value]) => (
-                    <div className="flex flex-row items-center" key={letter}>
-                        <p className="pr-4 text-lg uppercase">{letter}</p>
-                        <Progress className="h-4 flex-1" value={value * 100} />
-                        <p className="pl-4">{(value * 100).toFixed(2)}%</p>
-                    </div>
+                    <tr key={letter}>
+                        <td className="uppercase text-lg pr-4">{letter}</td>
+                        <td className="w-full">
+                            <Progress className="h-4" value={value * 100}/>
+                        </td>
+                        <td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
+                    </tr>
                 ))}
-            </div>
+                </tbody>
+            </table>
             {rest.length > 0 && (
                 <Accordion type="single" collapsible>
                     <AccordionItem value="item-1">
                         <AccordionTrigger className="text-xl">See more</AccordionTrigger>
                         <AccordionContent>
-                            <div className="flex flex-col py-4 gap-2">
+                            <table className="w-full table-auto border-separate border-spacing-y-2">
+                                <thead>
+                                <tr>
+                                    <th></th>
+                                    <th></th>
+                                    <th></th>
+                                </tr>
+                                </thead>
+                                <tbody>
                                 {rest.map(([letter, value]) => (
-                                    <div className="flex flex-row items-center" key={letter}>
-                                        <p className="pr-4 text-lg uppercase">{letter}</p>
-                                        <Progress className="h-4 flex-1" value={value * 100} />
-                                        <p className="pl-4">{(value * 100).toFixed(2)}%</p>
-                                    </div>
+                                    <tr key={letter}>
+                                        <td className="uppercase text-lg pr-4">{letter}</td>
+                                        <td className="w-full">
+                                            <Progress className="h-4" value={value * 100}/>
+                                        </td>
+                                        <td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
+                                    </tr>
                                 ))}
-                            </div>
+                                </tbody>
+                            </table>
                         </AccordionContent>
                     </AccordionItem>
                 </Accordion>
-            )}
+                )}
         </div>
     );
 }
diff --git a/src/components/WordDensity.tsx b/src/components/WordDensity.tsx
index 17864f8..c0d5013 100644
--- a/src/components/WordDensity.tsx
+++ b/src/components/WordDensity.tsx
@@ -14,29 +14,51 @@ export default function WordDensity({ density }: WordDensityProps) {
     return (
         <div className="h-auto w-full pt-8">
             <h2 className="text-2xl">Word Density</h2>
-            <div className="flex flex-col py-4 gap-2">
+            <table className="w-full table-auto border-separate border-spacing-y-2">
+                <thead>
+                <tr>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
                 {firstFive.map(([word, value]) => (
-                    <div className="flex flex-row items-center" key={word}>
-                        <p className="pr-4 text-lg uppercase">{word}</p>
-                        <Progress className="h-4 flex-1" value={value * 100} />
-                        <p className="pl-4">{(value * 100).toFixed(2)}%</p>
-                    </div>
+                    <tr key={word}>
+                        <td className="uppercase text-lg pr-4">{word}</td>
+                        <td className="w-full">
+                            <Progress className="h-4" value={value * 100}/>
+                        </td>
+                        <td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
+                    </tr>
                 ))}
-            </div>
+                </tbody>
+            </table>
             {rest.length > 0 && (
                 <Accordion type="single" collapsible>
                     <AccordionItem value="item-1">
                         <AccordionTrigger className="text-xl">See more</AccordionTrigger>
                         <AccordionContent>
-                            <div className="flex flex-col py-4 gap-2">
+                            <table className="w-full table-auto border-separate border-spacing-y-2">
+                                <thead>
+                                <tr>
+                                    <th></th>
+                                    <th></th>
+                                    <th></th>
+                                </tr>
+                                </thead>
+                                <tbody>
                                 {rest.map(([word, value]) => (
-                                    <div className="flex flex-row items-center" key={word}>
-                                        <p className="pr-4 text-lg uppercase">{word}</p>
-                                        <Progress className="h-4 flex-1" value={value * 100} />
-                                        <p className="pl-4">{(value * 100).toFixed(2)}%</p>
-                                    </div>
+                                    <tr key={word}>
+                                        <td className="uppercase text-lg pr-4">{word}</td>
+                                        <td className="w-full">
+                                            <Progress className="h-4" value={value * 100}/>
+                                        </td>
+                                        <td className="pl-4 text-md">{(value * 100).toFixed(2)}%</td>
+                                    </tr>
                                 ))}
-                            </div>
+                                </tbody>
+                            </table>
                         </AccordionContent>
                     </AccordionItem>
                 </Accordion>