Enhance appointment layout with responsive styles and multi-line support for titles and details

assets/stylesheets/customer_appointments.css

@@ -1,3 +1,17 @@
+/* Table & Grid Column Constraints */
+table.cal {
+    table-layout: fixed !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+table.cal th,
+table.cal td {
+    width: 14.28% !important;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
 /* Container Box */
 .appointment-block {
     position: relative;
@@ -12,7 +26,9 @@
     font-size: 10px;
     line-height: 1.2;
     overflow: visible !important; /* Allows tooltip popover to extend outside */
+    width: 100%;
     max-width: 100%;
+    min-width: 0; /* Prevents long flex children from expanding parent width */
     cursor: pointer; /* Cue for clickability */
     transition: transform 0.1s ease, box-shadow 0.1s ease;
 }
@@ -51,12 +67,12 @@
     flex-direction: column;
     flex-grow: 1;
     min-width: 0; 
-    overflow: hidden; /* Truncates long text cleanly inside card */
+    overflow: hidden;
 }
 
 .appointment-header {
     display: flex;
-    align-items: center;
+    align-items: flex-start; /* Aligns avatar and hours nicely with wrapped top lines */
     gap: 4px;
     font-weight: bold;
     min-width: 0;
@@ -67,11 +83,12 @@
     border-radius: 2px;
 }
 
+/* Option B: Multi-line wrapping for titles */
 .appointment-title {
     flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
     min-width: 0;
 }
 
@@ -88,12 +105,13 @@
     margin-left: auto;
 }
 
+/* Option B: Multi-line wrapping for details */
 .appointment-detail {
     color: #555;
     font-size: 9px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
     margin-top: 1px;
     min-width: 0;
 }