Room planner: fix settings scroll, checkout time to left-bracket sliver

- Settings page: add overflow-y:auto + flex:1 so content scrolls within
  page-content (which has overflow:hidden)

- Checkout time: move departure time out of B2B card stats row and into
  the left-bracket sliver, matching original plugin behaviour:
  - Only shown while prev booking status is still 'arrived' (not yet
    checked out); collapses to normal bracket once NewBook flips to
    'departed'
  - Positioned absolutely over the ::before left bracket area
  - Remove the forced 'departed' override on prev_status — let NewBook's
    real status drive bracket colour so the sliver shows correctly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/RoomCard.tsx

@@ -86,12 +86,18 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
     ? nightsInfo(booking.booking_arrival, booking.booking_departure, viewDate)
     : null
 
-  // Time pills
+  // Arrival ETA pill — only for arriving bookings
   const arriveTime = (room.flow_type === 'arrive' || room.flow_type === 'back-to-back')
     ? etaTime(booking?.booking_eta)
     : null
-  const departTime = (room.flow_type === 'depart' || room.flow_type === 'back-to-back')
-    ? (room.departing_time?.slice(0, 5) ?? null)
+
+  // Departure time shown in the left-bracket sliver (not as a card pill).
+  // Show only when there's a departing booking whose status is still 'arrived'
+  // (not yet checked out). Matches original: collapses once status flips to 'departed'.
+  const sliverDepartTime = !room.spans_previous &&
+    room.departing_time &&
+    room.departing_booking?.booking_status?.toLowerCase() === 'arrived'
+    ? room.departing_time.slice(0, 5)
     : null
 
   // CSS data attributes for the Gantt bracket system
@@ -129,6 +135,14 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
       {...(dataAttrs as React.HTMLAttributes<HTMLDivElement>)}
       onClick={() => onClick(room)}
     >
+      {/* ── Departure time in left-bracket sliver ── */}
+      {sliverDepartTime && (
+        <div className="card-sliver-depart">
+          <Clock size={9} {...I} />
+          {sliverDepartTime}
+        </div>
+      )}
+
       {/* ── Header row ─────────────────────────────── */}
       <div className="card-header">
         <span className="card-room-number">{room.site_name}</span>
@@ -193,13 +207,6 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
             </span>
           )}
 
-          {/* Departure time */}
-          {departTime && (
-            <span className="card-stat-pill time-depart">
-              <Clock size={11} {...I} /> {departTime}
-            </span>
-          )}
-
           {/* Bed type */}
           {twinType === 'twin' ? (
             <span className="card-stat-pill bed-twin">

frontend/src/index.css

@@ -444,6 +444,24 @@ html, body, #root {
 .room-card[data-next-status="unconfirmed"]::after { border-color: #f59e0b; }
 .room-card[data-next-status="departed"]::after    { border-color: #a855f7; }
 
+/* Departure time shown in left-bracket sliver (while prev booking still 'arrived') */
+.card-sliver-depart {
+  position: absolute;
+  left: -21px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  font-size: 8px;
+  font-weight: 600;
+  color: var(--col-arrived);
+  line-height: 1;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
 /* Blocked room */
 .room-card.room-blocked {
   background: #4b5563;
@@ -912,6 +930,8 @@ html, body, #root {
 .settings-page {
   padding: 20px;
   max-width: 720px;
+  overflow-y: auto;
+  flex: 1;
 }
 .settings-section {
   background: var(--card-bg);