privateboard 0.1.8 → 0.1.9

package/public/room-settings.css

@@ -120,6 +120,40 @@
   content: "▸ ";
   color: var(--lime, #6FB572);
 }
+
+/* ─── Title clamp ──────────────────────────────────────────────
+   Long room titles get clamped to 2 lines. The Show more / less
+   toggle is rendered `hidden` and unhidden by room-settings.js's
+   post-mount measurement only when the title actually overflows. */
+.rs-title-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.rs-head .title.is-clamped {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.rs-title-toggle {
+  align-self: flex-start;
+  appearance: none;
+  background: transparent;
+  border: none;
+  font-family: var(--mono);
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-soft, #8E8B83);
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.12s;
+}
+.rs-title-toggle:hover { color: var(--lime, #6FB572); }
+.rs-title-toggle::before { content: "[ "; color: var(--text-faint, #3A382F); }
+.rs-title-toggle::after  { content: " ]"; color: var(--text-faint, #3A382F); }
 .rs-head .close-btn {
   width: 24px; height: 24px;
   background: transparent;
@@ -863,11 +897,13 @@
 .rs-action.danger { color: var(--red, #B5706A); border-color: rgba(181, 112, 106, 0.4); }
 .rs-action.danger:hover { background: var(--red, #B5706A); color: var(--bg, #0A0A0A); border-color: var(--red, #B5706A); }
 
-/* Icon-only buttons in the room-head action bar */
+/* Icon-only buttons in the room-head action bar · sized to match
+   the avatar / cast-count tile (22px tall) so the whole right-side
+   toolbar lands on a single line at the new compact header height. */
 .head-icon-btn,
 .room-settings-trigger {
-  width: 28px;
-  height: 26px;
+  width: 24px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -876,7 +912,7 @@
   border: 0.5px solid var(--line-strong, #3A3A35);
   color: var(--text-soft, #8E8B83);
   font-family: var(--mono);
-  font-size: 13px;
+  font-size: 12px;
   line-height: 1;
   cursor: pointer;
   text-decoration: none;

package/public/room-settings.js

@@ -290,9 +290,12 @@
           </div>
 
           <header class="rs-head">
-            <div>
+            <div class="rs-head-text">
               <div class="meta">// room #<span class="rs-number">${ROOM_STATE.number}</span> · <span class="live">${ROOM_STATE.status}</span> · <span class="rs-turns">${ROOM_STATE.turns}</span> turns</div>
-              <div class="title rs-title">${escape(ROOM_STATE.title)}</div>
+              <div class="rs-title-wrap">
+                <div class="title rs-title is-clamped" data-rs-title>${escape(ROOM_STATE.title)}</div>
+                <button type="button" class="rs-title-toggle" data-rs-title-toggle hidden>Show more</button>
+              </div>
             </div>
             <button type="button" class="close-btn" aria-label="Close">✕</button>
           </header>
@@ -628,6 +631,29 @@
     overlay.classList.add("open");
     overlay.setAttribute("aria-hidden", "false");
     document.body.style.overflow = "hidden";
+    // Title clamp · run AFTER the overlay becomes visible so the
+    // title element has real dimensions to measure. Resets to clamped
+    // every open (a previously-expanded title shouldn't stick across
+    // close + reopen). Double-rAF gives layout + line-clamp a beat to
+    // settle on cold opens (Safari can return stale scrollHeight on a
+    // single rAF after a display switch).
+    applyTitleClamp();
+  }
+
+  function applyTitleClamp() {
+    const titleEl = modal.querySelector("[data-rs-title]");
+    const titleBtn = modal.querySelector("[data-rs-title-toggle]");
+    if (!titleEl || !titleBtn) return;
+    titleEl.classList.add("is-clamped");
+    titleBtn.textContent = "Show more";
+    titleBtn.hidden = true;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (titleEl.scrollHeight > titleEl.clientHeight + 1) {
+          titleBtn.hidden = false;
+        }
+      });
+    });
   }
   function close() {
     if (!overlay) return;
@@ -880,6 +906,22 @@
 
     // Close (X) — discards staged changes via close().
     overlay.querySelector(".close-btn").addEventListener("click", close);
+
+    // Title clamp · click handler attaches once at init and persists
+    // across opens (the toggle button DOM node is reused). The actual
+    // overflow measurement happens inside open() via applyTitleClamp,
+    // because at init time the overlay is `display: none` so the
+    // title element has 0×0 dimensions and scrollHeight is meaningless.
+    const titleBtn = modal.querySelector("[data-rs-title-toggle]");
+    if (titleBtn) {
+      titleBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        const titleEl = modal.querySelector("[data-rs-title]");
+        if (!titleEl) return;
+        const expanded = titleEl.classList.toggle("is-clamped") === false;
+        titleBtn.textContent = expanded ? "Show less" : "Show more";
+      });
+    }
     // Confirm — push staged changes to the backend then close.
     modal.querySelector("[data-rs-confirm]").addEventListener("click", (e) => {
       e.preventDefault();

package/public/user-settings.css

@@ -69,33 +69,36 @@
 }
 .us-classification .right { color: var(--text-faint, #3A382F); letter-spacing: 0.12em; }
 
-.us-head {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 14px;
-  align-items: center;
-  padding: 14px 18px;
-  border-bottom: 0.5px dashed var(--line-bright, #2A2A26);
-  flex: 0 0 auto;
-}
-.us-head .us-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text, #C8C5BE);
-  letter-spacing: -0.01em;
-}
-.us-head .us-title::before { content: "▸ "; color: var(--lime, #6FB572); }
-.us-head .us-close {
-  width: 28px; height: 28px;
+/* Close button · absolute-positioned in the modal's top-right
+   corner, pinned BELOW the classification strip so it doesn't
+   overlap "// LOCAL" at the right edge of that strip. The strip is
+   ~22-24px tall (6px + 9px font + 6px + 0.5px border). The button
+   sits at 48px from the modal top — roughly aligned with the
+   first pane's `padding-top: 18px` baseline, so it visually
+   anchors to the section content rather than crowding the strip
+   below. The previous header strip (`.us-head`) that hosted this
+   button has been retired — first the "Preference" title, then
+   the surrounding bar with its dashed divider. */
+.us-close {
+  position: absolute;
+  top: 38px;
+  right: 14px;
+  z-index: 1;
+  width: 24px; height: 24px;
   background: transparent;
   border: 0.5px solid var(--line-bright, #2A2A26);
   color: var(--text-dim, #5C5A52);
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 1;
   cursor: pointer;
   font-family: var(--mono);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   transition: all 0.12s;
 }
-.us-head .us-close:hover {
+.us-close:hover {
   border-color: var(--lime, #6FB572);
   color: var(--lime, #6FB572);
 }
@@ -803,7 +806,6 @@
 
 @media (max-width: 600px) {
   .user-settings-overlay { padding: 12px; }
-  .us-head { padding-left: 14px; padding-right: 14px; }
   .us-pane { padding: 14px; }
   .us-foot { padding: 10px 14px; }
 }

package/public/user-settings.js

@@ -988,10 +988,7 @@
             <span class="right">// local</span>
           </div>
 
-          <header class="us-head">
-            <div class="us-title">Preference</div>
-            <button type="button" class="us-close" aria-label="Close">✕</button>
-          </header>
+          <button type="button" class="us-close" aria-label="Close">✕</button>
 
           <div class="us-frame">
             <nav class="us-nav" role="tablist">