From d14670b06002378c96dfc33511aca7e09060ecde Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Fri, 10 Jul 2026 12:10:24 +0000
Subject: [PATCH] =?UTF-8?q?Widen=20left=20bracket=20sliver=203=C3=97=20for?=
 =?UTF-8?q?=20overdue=20checkouts=20on=20today's=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When viewing today and the departing booking is still 'arrived' in NewBook
(not yet checked out), the blue left-bracket sliver now extends ~3× wider
into the arriving card slot with a light blue fill, making the uncleared
checkout visually prominent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/RoomCard.tsx |  5 ++++-
 frontend/src/index.css               | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RoomCard.tsx b/frontend/src/components/RoomCard.tsx
index 09f1cca..d2963c5 100644
--- a/frontend/src/components/RoomCard.tsx
+++ b/frontend/src/components/RoomCard.tsx
@@ -108,6 +108,9 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
     ? room.departing_time.slice(0, 5)
     : null
 
+  // On today specifically: previous booking still hasn't checked out — widen the bracket
+  const isOverdueCheckout = isToday && !!sliverDepartTime
+
   // CSS data attributes for the Gantt bracket system
   const dataAttrs: Record<string, string> = {}
   if (bookingStatus) dataAttrs['data-booking-status'] = bookingStatus
@@ -139,7 +142,7 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
 
   return (
     <div
-      className={`room-card${isBlocked ? ' room-blocked' : ''}${sliverDepartTime ? ' has-sliver-time' : ''}`}
+      className={`room-card${isBlocked ? ' room-blocked' : ''}${sliverDepartTime ? ' has-sliver-time' : ''}${isOverdueCheckout ? ' has-overdue-checkout' : ''}`}
       {...(dataAttrs as React.HTMLAttributes<HTMLDivElement>)}
       onClick={() => onClick(room)}
     >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 23d3682..93dcc6a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -487,6 +487,15 @@ html, body, #root {
   letter-spacing: .04em;
 }
 
+/* Overdue checkout today: bracket extends ~3× into the arriving card slot */
+.room-card.has-overdue-checkout {
+  padding-left: 24px;
+}
+.room-card.has-overdue-checkout[data-previous-status]::before {
+  width: 46px;
+  background: rgba(59, 130, 246, 0.1);
+}
+
 /* Blocked room */
 .room-card.room-blocked {
   background: #4b5563;
@@ -1063,3 +1072,18 @@ html, body, #root {
   padding: 40px;
   text-align: center;
 }
+
+/* Sidebar scrollbar */
+.nav-scroll::-webkit-scrollbar,
+.sidebar::-webkit-scrollbar,
+.sidebar-nav::-webkit-scrollbar { width: 4px; }
+.nav-scroll::-webkit-scrollbar-track,
+.sidebar::-webkit-scrollbar-track,
+.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
+.nav-scroll::-webkit-scrollbar-thumb,
+.sidebar::-webkit-scrollbar-thumb,
+.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
+.nav-scroll::-webkit-scrollbar-thumb:hover,
+.sidebar::-webkit-scrollbar-thumb:hover,
+.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
+.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }