From 73da30e038195dc1823b64ce175f1113eae070f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Wed, 18 Jun 2025 21:53:58 +0300
Subject: [PATCH] Responsive UI

---
 app/components/Calendar.module.css | 17 +++++++----------
 app/components/Calendar.tsx        |  2 +-
 app/page.module.css                |  1 -
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/app/components/Calendar.module.css b/app/components/Calendar.module.css
index 8065962..029a4a7 100644
--- a/app/components/Calendar.module.css
+++ b/app/components/Calendar.module.css
@@ -1,9 +1,12 @@
 .calendarGrid {
     display: grid;
-    gap: 1rem;
+    gap: 3%;
     grid-template-columns: auto auto auto auto auto auto auto;
     text-align: center;
     margin-bottom: 2rem;
+    width: 100%;
+    font-size: 0.6rem;
+    max-width: 35rem;
 }
 
 .monthNavigation {
@@ -30,10 +33,10 @@
 
 .calendarCell {
     border: 2px solid #ccc;
-    padding: 0.5rem;
+    padding: 2%;
     cursor: pointer;
-    height: 3rem;
-    width: 3rem;
+    height: 100%;
+    aspect-ratio: 1;
     border-radius: 0.5rem;
 }
 
@@ -53,13 +56,7 @@
     }
 }
 
-.firstWeekPaddingCell {
-    height: 3rem;
-    width: 3rem;
-}
-
 .statusText {
-    font-size: 0.8rem;
     color: #555;
 }
 
diff --git a/app/components/Calendar.tsx b/app/components/Calendar.tsx
index 1ed0787..cb71c2f 100644
--- a/app/components/Calendar.tsx
+++ b/app/components/Calendar.tsx
@@ -19,7 +19,7 @@ export default function Calendar() {
     const generateFirstWeekPadding = (month: number) => {
         const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
         const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, index) => (
-            <div key={index} className={`${styles.firstWeekPaddingCell}`}>
+            <div key={index}>
                 &nbsp;
             </div>
         ));
diff --git a/app/page.module.css b/app/page.module.css
index 2c25e34..476e745 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -8,7 +8,6 @@
 }
 
 .title {
-  font-size: 64px;
   font-weight: 600;
   line-height: 1.2;
   text-align: center;