diff --git a/client/src/components/Collections/CollectionPlaceDetail.tsx b/client/src/components/Collections/CollectionPlaceDetail.tsx index e232e2dec..ec87ebe44 100644 --- a/client/src/components/Collections/CollectionPlaceDetail.tsx +++ b/client/src/components/Collections/CollectionPlaceDetail.tsx @@ -216,23 +216,7 @@ export default function CollectionPlaceDetail({
{editing ? setName(e.target.value)} className="col-detail-name-input" autoFocus aria-label={t('collections.listName')} /> - : ( - /* Beside the name, not three rows below it: a label is part of what this - place IS, the same as its name, and read on its own further down it - looked like a property of the rating above it. */ -
-

{place.name}

- {assignedLabels.length > 0 && ( -
- {assignedLabels.map(l => ( - - {l.name} - - ))} -
- )} -
- )} + :

{place.name}

}
@@ -251,11 +235,22 @@ export default function CollectionPlaceDetail({ {}} t={t} /> {/* Collaborative rating (#1435) — every member votes; the average shows. */} - {onRate && ( - /* In a panel of full-width rows, a bare line of stars read as another row of - text. Set on its own ground it reads as the one thing here you can answer. */ -
- + {/* Rating and labels on one line, each on its own ground. + A bare line of stars read as another row of text, and the labels tried the + cover photo first — where a blue chip on a blue sky is simply not there. + Side by side they are two badges answering two questions about the place. */} + {(onRate || assignedLabels.length > 0) && ( +
+ {onRate && ( +
+ +
+ )} + {!editing && assignedLabels.map(l => ( + + {l.name} + + ))}
)} diff --git a/client/src/styles/collections.css b/client/src/styles/collections.css index aaedd671b..6ec43e112 100644 --- a/client/src/styles/collections.css +++ b/client/src/styles/collections.css @@ -318,7 +318,12 @@ .trek-dash .col-labelchip.on { color: var(--label, var(--accent)); background: color-mix(in oklch, var(--label, var(--accent)) 16%, transparent); border-color: color-mix(in oklch, var(--label, var(--accent)) 42%, transparent); } .trek-dash .col-labelchip.on .col-labelchip-dot { background: var(--label, var(--accent)); } .trek-dash .col-labelchip.static { cursor: default; color: var(--label, var(--accent)); background: color-mix(in oklch, var(--label, var(--accent)) 14%, transparent); border-color: transparent; } -.trek-dash .col-detail-rating { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; padding: 6px 12px; margin: 2px 0 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } +/* One row of badges: what this place scored, and what it is filed under. */ +.trek-dash .col-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; } +.trek-dash .col-detail-rating { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } +/* Matched to the rating beside it, so the row reads as one set rather than a pill next + to a tag. */ +.trek-dash .col-labelchip.big { padding: 6px 12px; font-size: 12.5px; } .trek-dash .col-detail-labels { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; } /* ----------------- filter bar (status + category dropdowns) ----------------- */ @@ -434,12 +439,6 @@ } .trek-dash .col-detail-close:hover { background: rgba(0,0,0,.6); } .trek-dash .col-detail-head { position: absolute; left: 20px; right: 20px; bottom: 12px; z-index: 1; color: #fff; } -/* Name and labels on one line, wrapping together. The labels sit on the cover photo - now, so they carry the same shadow the name does or they vanish into a bright sky. */ -.trek-dash .col-detail-titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; } -.trek-dash .col-detail-titlerow .col-detail-name { flex: 0 1 auto; } -.trek-dash .col-detail-labels.on-cover { margin: 0; flex: 0 1 auto; } -.trek-dash .col-detail-labels.on-cover .col-labelchip { box-shadow: 0 1px 6px rgba(0,0,0,.45); } .trek-dash .col-detail-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,.55); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .trek-dash .col-detail-name-input { width: 100%; font-size: 20px; font-weight: 700; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); border-radius: 8px; padding: 3px 8px; color: #fff; outline: none; } .trek-dash .col-detail-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } @@ -459,7 +458,12 @@ .trek-dash .col-detail-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); } /* rendered markdown + link chips (view) */ -.trek-dash .col-detail-md { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; } +/* The note sits on its own ground too, full width: loose in the column it ran into the + footer as another paragraph of the panel rather than reading as something somebody + wrote about this place. */ +.trek-dash .col-detail-md { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); } +.trek-dash .col-detail-md > :first-child { margin-top: 0; } +.trek-dash .col-detail-md > :last-child { margin-bottom: 0; } .trek-dash .col-detail-links { display: flex; flex-wrap: wrap; gap: 7px; } .trek-dash .col-detail-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); transition: filter .12s; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trek-dash .col-detail-link:hover { filter: brightness(1.05); }