Responsive UI

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;
+    height: 100%;
-    width: 3rem;
+    aspect-ratio: 1;
     border-radius: 0.5rem;
 }
 
@@ -53,13 +56,7 @@
     }
 }
 
-.firstWeekPaddingCell {
-    height: 3rem;
-    width: 3rem;
-}
-
 .statusText {
-    font-size: 0.8rem;
     color: #555;
 }
 

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>
         ));

app/page.module.css

@@ -8,7 +8,6 @@
 }
 
 .title {
-  font-size: 64px;
   font-weight: 600;
   line-height: 1.2;
   text-align: center;