diff --git a/public/css/styles.css b/public/css/styles.css index 9fcd979..09ea5bd 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -238,7 +238,9 @@ textarea.input { resize: vertical; } .cal-band.round-r { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .cal-band-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding-bottom: 0.2rem; } -.cal-day { min-height: 92px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; } +/* min-width: 0 lets grid columns stay equal — otherwise a long unbreakable + chip (multi-leg flight chains) forces its column wider and deforms the grid. */ +.cal-day { min-width: 0; min-height: 92px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; } .cal-day.clickable { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; } .cal-day.clickable:hover { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .cal-day.cal-out { background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 8px, #eef2f7 8px, #eef2f7 16px); color: var(--text-faint); } @@ -248,7 +250,8 @@ textarea.input { resize: vertical; } .cal-month { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--brand); } .cal-flag { margin-left: auto; color: var(--warn); font-size: 0.75rem; } .cal-chips { display: flex; flex-direction: column; gap: 3px; overflow: hidden; } -.cal-chip { display: flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; padding: 0.12rem 0.35rem; border-radius: 6px; background: color-mix(in srgb, var(--chip) 14%, white); border-left: 3px solid var(--chip); color: #334155; } +.cal-chip { display: flex; align-items: center; gap: 0.25rem; min-width: 0; font-size: 0.72rem; padding: 0.12rem 0.35rem; border-radius: 6px; background: color-mix(in srgb, var(--chip) 14%, white); border-left: 3px solid var(--chip); color: #334155; } +.cal-chip .chip-price { flex-shrink: 0; } .chip-icon { flex-shrink: 0; } .chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }