grabowski/trip-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep calendar columns equal when chips overflow

Browse Source 
Grid items default to min-width:auto, so a long unbreakable chip (multi-leg flight code chains) forced its day column wider and deformed the week grid. Allow day cells and chips to shrink (min-width: 0) so the existing ellipsis rules apply, and pin the price badge so it never truncates.
This commit is contained in:
grabowski
2026-07-19 01:52:24 +07:00
parent 430e870426
commit 2eda9e4f6d
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+5 -2
View File
@@ -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; }