my-app/src/components/BookingModal.module.css

@@ -30,10 +30,12 @@
     transition: all 0.2s ease;
 }
 
-.cancelButton:hover {
-    background-color: #f9fafb;
-    border-color: #9ca3af;
-    cursor: pointer;
+@media (hover: hover) {
+    .cancelButton:hover {
+        background-color: #f9fafb;
+        border-color: #9ca3af;
+        cursor: pointer;
+    }
 }
 
 .saveButton {
@@ -49,10 +51,12 @@
     box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
 }
 
-.saveButton:hover {
-    background-color: #047857;
-    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
-    cursor: pointer;
+@media (hover: hover) {
+    .saveButton:hover {
+        background-color: #047857;
+        box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
+        cursor: pointer;
+    }
 }
 
 .saveButton:active {
@@ -99,6 +103,23 @@
     max-width: 400px;
 }
 
+/* Ensure modal appears above header and handles overflow */
+:global(.react-aria-ModalOverlay) {
+    z-index: 1100 !important;
+    overflow-y: auto !important;
+    display: flex !important;
+    align-items: safe center !important;
+    justify-content: center !important;
+    padding: 2rem 1rem !important;
+    box-sizing: border-box !important;
+}
+
+:global(.react-aria-ModalOverlay .react-aria-Modal) {
+    max-height: calc(100vh - 4rem) !important;
+    max-width: 90vw !important;
+    overflow-y: auto !important;
+}
+
 /* New time display styles */
 .timeDisplay {
     margin: 1rem 0;
@@ -161,11 +182,13 @@
     box-shadow: none;
 }
 
-.disabledButton:hover {
-    background-color: #f8f9fa !important;
-    transform: none !important;
-    box-shadow: none;
-    cursor: default;
+@media (hover: hover) {
+    .disabledButton:hover {
+        background-color: #f8f9fa !important;
+        transform: none !important;
+        box-shadow: none;
+        cursor: default;
+    }
 }
 
 .disabledButton:active {

my-app/src/components/TimeCard.module.css

@@ -13,13 +13,24 @@
     background-color: #F8FBFC;
     width: 135px;
     height: 20px;
+    transition: all 0.15s ease;
 }
 
-.container:hover {
-    background-color: #E5E5E5;
+@media (hover: hover) {
+    .container:hover {
+        background-color: #E5E5E5;
+    }
 }
 
-.container[data-focused] {
+.container:active,
+.container[data-pressed] {
+    background-color: #D1D5DB;
+    transform: translateY(1px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    transition: all 0.1s ease;
+}
+
+.container[data-focus-visible] {
   outline: 2px solid #2563EB;
   outline-offset: -1px;
 }
@@ -37,11 +48,13 @@
 .upToText {
     font-weight: 300;
     color: #919191;
+    font-size: 0.9rem
 }
 
 .hoursText {
     font-weight: 500;
     color:#686765;
+    font-size: 0.9rem;
 }
 
 
@@ -81,10 +94,12 @@
     transition: all 0.2s ease;
 }
 
-.cancelButton:hover {
-    background-color: #f9fafb;
-    border-color: #9ca3af;
-    cursor: pointer;
+@media (hover: hover) {
+    .cancelButton:hover {
+        background-color: #f9fafb;
+        border-color: #9ca3af;
+        cursor: pointer;
+    }
 }
 
 .saveButton {
@@ -100,10 +115,12 @@
     box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
 }
 
-.saveButton:hover {
-    background-color: #047857;
-    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
-    cursor: pointer;
+@media (hover: hover) {
+    .saveButton:hover {
+        background-color: #047857;
+        box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
+        cursor: pointer;
+    }
 }
 
 .saveButton:active {
@@ -203,10 +220,12 @@
     opacity: 0.6 !important;
 }
 
-.disabledButton:hover {
-    background-color: #f8f9fa !important;
-    cursor: not-allowed !important;
-    transform: none !important;
+@media (hover: hover) {
+    .disabledButton:hover {
+        background-color: #f8f9fa !important;
+        cursor: not-allowed !important;
+        transform: none !important;
+    }
 }
 
 .disabledButton:active {

my-app/src/components/TimeCardContainer.module.css

@@ -13,6 +13,8 @@
 	width: 350px;
 	gap: 0.5rem;
 	height: fit-content;
+	align-items: center;
+	justify-content: center;
 }
 
 .timeCardList {