From 886afab1efa826237a17404c67445c533de98596 Mon Sep 17 00:00:00 2001
From: Felix Schulze <admin@schulze.network>
Date: Wed, 30 Apr 2025 20:05:38 +0200
Subject: [PATCH] styling, graph sizing and number precision

---
 src/app/components/FireCalculatorForm.tsx | 48 ++++++++++-------------
 src/app/page.tsx                          |  4 +-
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/app/components/FireCalculatorForm.tsx b/src/app/components/FireCalculatorForm.tsx
index 253abe1..cbcdc43 100644
--- a/src/app/components/FireCalculatorForm.tsx
+++ b/src/app/components/FireCalculatorForm.tsx
@@ -368,8 +368,8 @@ export default function FireCalculatorForm() {
   };
 
   return (
-    <div className="w-full max-w-3xl">
-      <Card className="mb-8">
+    <>
+      <Card className="mb-4">
         <CardHeader>
           <CardTitle className="text-2xl">FIRE Calculator</CardTitle>
           <CardDescription>
@@ -541,7 +541,7 @@ export default function FireCalculatorForm() {
       </Card>
 
       {result && (
-        <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div className="mb-4 grid grid-cols-1 gap-2 md:grid-cols-2">
           {result.error ? (
             <Card className="col-span-full">
               <CardContent className="pt-6">
@@ -559,11 +559,9 @@ export default function FireCalculatorForm() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <div className="space-y-2">
-                    <p className="text-3xl font-bold">
-                      {formatNumber(result.fireNumber)}
-                    </p>
-                  </div>
+                  <p className="text-3xl font-bold">
+                    {formatNumber(result.fireNumber)}
+                  </p>
                 </CardContent>
               </Card>
 
@@ -575,11 +573,9 @@ export default function FireCalculatorForm() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <div className="space-y-2">
-                    <p className="text-3xl font-bold">
-                      {result.retirementAge ?? "N/A"}
-                    </p>
-                  </div>
+                  <p className="text-3xl font-bold">
+                    {result.retirementAge ?? "N/A"}
+                  </p>
                 </CardContent>
               </Card>
 
@@ -592,11 +588,9 @@ export default function FireCalculatorForm() {
                     </CardDescription>
                   </CardHeader>
                   <CardContent>
-                    <div className="space-y-2">
-                      <p className="text-3xl font-bold">
-                        {formatNumber(result.inflationAdjustedAllowance)}
-                      </p>
-                    </div>
+                    <p className="text-3xl font-bold">
+                      {formatNumber(result.inflationAdjustedAllowance)}
+                    </p>
                   </CardContent>
                 </Card>
               )}
@@ -610,11 +604,9 @@ export default function FireCalculatorForm() {
                     </CardDescription>
                   </CardHeader>
                   <CardContent>
-                    <div className="space-y-2">
-                      <p className="text-3xl font-bold">
-                        {result.retirementYears}
-                      </p>
-                    </div>
+                    <p className="text-3xl font-bold">
+                      {result.retirementYears}
+                    </p>
                   </CardContent>
                 </Card>
               )}
@@ -633,7 +625,7 @@ export default function FireCalculatorForm() {
           </CardHeader>
           <CardContent>
             <ChartContainer
-              className="h-80"
+              className="aspect-auto h-80 w-full"
               config={{
                 balance: {
                   label: "Balance",
@@ -661,13 +653,13 @@ export default function FireCalculatorForm() {
                 <YAxis
                   tickFormatter={(value: number) => {
                     if (value >= 1000000) {
-                      return `${(value / 1000000).toFixed(1)}M`;
+                      return `${(value / 1000000).toPrecision(3)}M`;
                     } else if (value >= 1000) {
-                      return `${(value / 1000).toFixed(0)}K`;
+                      return `${(value / 1000).toPrecision(3)}K`;
                     }
                     return value.toString();
                   }}
-                  width={80}
+                  width={25}
                 />
                 <ChartTooltip
                   content={({ active, payload }) => {
@@ -742,6 +734,6 @@ export default function FireCalculatorForm() {
           </CardContent>
         </Card>
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bde408d..8dea5f3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ import {
 export default function HomePage() {
   return (
     <main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-4">
-      <div className="container mx-auto flex flex-col items-center justify-center gap-4 px-4 py-16 text-center">
+      <div className="mx-auto flex flex-col items-center justify-center gap-4 text-center">
         <div className="flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
           <Image
             src="/investingfire_logo_no-bg.svg"
@@ -31,7 +31,7 @@ export default function HomePage() {
       </div>
 
       {/* Added SEO Content Sections */}
-      <div className="container mx-auto max-w-4xl px-4 py-8 text-left">
+      <div className="mx-auto max-w-2xl py-12 text-left">
         <section className="mb-12">
           <h2 className="mb-4 text-3xl font-bold">
             What is FIRE? Understanding Financial Independence and Early