better admin calendar

ht_booking/assets/views/calendar/week.html

@@ -33,11 +33,26 @@
     #cal .cal-day-2 { display: table-cell; }
     #cal.cal-js .cal-day { display: none; }
     #cal.cal-js .cal-day.cal-day-on { display: table-cell; }
+    /* Slim the hour column to its compact label so bookings get the width. */
+    #cal tbody td:first-child {
+      width: 1%;
+      white-space: nowrap;
+      padding: 0.3rem 0.4rem;
+      font-size: 0.7rem;
+      line-height: 1.15;
+    }
   }
 </style>
 {% if is_admin %}
 <style>
-  /* Admin calendar — detailed-view toggle. The public calendar is unaffected. */
+  /* Admin calendar — strict, content-independent column widths. A long
+     booking can never widen its column; it grows taller instead. (The public
+     calendar has merged free rows with a colspan, so it keeps auto layout.) */
+  #cal { table-layout: fixed; }
+  @media (max-width: 767px) {
+    #cal tbody td:first-child { width: 3.25rem; }
+  }
+  /* Detailed-view toggle. */
   .cal-detail { display: none; }
   #cal.cal--detailed .cal-chip {
     position: static;
@@ -48,10 +63,7 @@
     align-items: stretch;
     justify-content: center;
   }
-  #cal.cal--detailed .cal-name {
-    white-space: normal;
-    font-weight: 600;
-  }
+  #cal.cal--detailed .cal-name { font-weight: 600; }
   #cal.cal--detailed .cal-detail {
     display: flex;
     flex-direction: column;
@@ -59,8 +71,21 @@
     margin-top: 2px;
     font-weight: 400;
     line-height: 1.25;
+  }
+  /* Detailed fields wrap to as many lines as needed — the full booking info
+     shows and the cell just grows taller, never wider. */
+  #cal.cal--detailed .cal-name,
+  #cal.cal--detailed .cal-detail > span {
+    white-space: normal;
     overflow-wrap: anywhere;
   }
+  /* A long note is capped with an ellipsis so one booking can't run away. */
+  #cal.cal--detailed .cal-note {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    overflow: hidden;
+  }
 </style>
 {% endif %}
 {% endblock head %}
@@ -185,7 +210,7 @@
             <span class="cal-detail">
               {%- if cell.title %}<span class="truncate opacity-95">{{ cell.title }}</span>{% endif -%}
               {%- if cell.contact %}<span class="truncate opacity-80">{{ cell.contact }}</span>{% endif -%}
-              {%- if cell.note %}<span class="opacity-80">{{ cell.note }}</span>{% endif -%}
+              {%- if cell.note %}<span class="cal-note opacity-80">{{ cell.note }}</span>{% endif -%}
             </span>
             {% endif %}
           </a>