hotel-manage-stack/room-planner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix overdue checkout bracket position: shift card right not just content

Browse source 
Increase margin-left to 46px so the card's left edge moves 23px rightward,
giving the bracket clean space to its left rather than overlapping the card.
Restore margin-right to 23px — the extra left margin is the compensation.
Reposition bracket and sliver-depart to left: -46px to match.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-10 12:26:41 +00:00
parent 7e908d3447
commit d5492a0152
1 changed files with 7 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/index.css
View file

@ -487,21 +487,20 @@ html, body, #root {
letter-spacing: .04em; letter-spacing: .04em;
} }
/* Overdue checkout today: bracket extends ~3× into the arriving card slot. /* Overdue checkout today: card shifts right by 23px (margin-left 46px) so the
margin-right increase compensates so the card narrows rightward by the same wider bracket sits cleanly in that space rather than overlapping the card.
amount the bracket intrudes leftward, keeping overall row width consistent. */ margin-right stays normal — the 23px extra left margin is the compensation. */
.room-card.has-overdue-checkout { .room-card.has-overdue-checkout {
padding-left: 24px; margin-left: 46px;
margin-right: 46px; margin-right: 23px;
} }
.room-card.has-overdue-checkout[data-previous-status]::before { .room-card.has-overdue-checkout[data-previous-status]::before {
left: -46px;
width: 46px; width: 46px;
background: rgba(59, 130, 246, 0.1); background: rgba(59, 130, 246, 0.1);
} }
.room-card.has-overdue-checkout[data-next-status]::after {
right: -46px;
}
.room-card.has-overdue-checkout .card-sliver-depart { .room-card.has-overdue-checkout .card-sliver-depart {
left: -46px;
width: 46px; width: 46px;
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 10px;