Responsive UI

2025-06-18 21:53:58 +03:00
parent 1d76cd1f87
commit 73da30e038
3 changed files with 8 additions and 12 deletions
--- 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;
 }