style(collections): the place panel as things on their own ground

The labels tried the cover photo and lost: a blue chip on a blue sky is simply not
there, whatever shadow it carries. They sit beside the rating now, both as badges
on one row — two answers about the place, side by side, each legible.

The note takes the full width on a ground of its own. Loose in the column it read
as another paragraph of the panel rather than as something somebody wrote about
this place.

client/src/components/Collections/CollectionPlaceDetail.tsx

@@ -216,23 +216,7 @@ export default function CollectionPlaceDetail({
         <div className="col-detail-head">
           {editing
             ? <input value={name} onChange={e => 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. */
-              <div className="col-detail-titlerow">
-                <h2 className="col-detail-name">{place.name}</h2>
-                {assignedLabels.length > 0 && (
-                  <div className="col-detail-labels on-cover">
-                    {assignedLabels.map(l => (
-                      <span key={l.id} className="col-labelchip on static" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
-                        <span className="col-labelchip-dot" /> {l.name}
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
+            : <h2 className="col-detail-name">{place.name}</h2>}
         </div>
       </div>
 
@@ -251,11 +235,22 @@ export default function CollectionPlaceDetail({
         <StatusSegment status={place.status} onSet={canEdit ? onSetStatus : () => {}} 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. */
-          <div className="col-detail-rating">
-            <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={onRate} />
+        {/* 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) && (
+          <div className="col-detail-badges">
+            {onRate && (
+              <div className="col-detail-rating">
+                <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={onRate} />
+              </div>
+            )}
+            {!editing && assignedLabels.map(l => (
+              <span key={l.id} className="col-labelchip on static big" style={{ ['--label' as string]: l.color || 'var(--accent)' }}>
+                <span className="col-labelchip-dot" /> {l.name}
+              </span>
+            ))}
           </div>
         )}
 

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); }