@starlove/orbit 1.3.4 → 1.3.5

package/public/js/kanban.js

@@ -513,10 +513,13 @@ export function enableKanbanDragScroll() {
 
   kanban.addEventListener("pointerdown", (event) => {
     if (event.button !== 0) return;
+    // Clear stale drag-click suppression on any fresh primary press — even over
+    // a card — so a both-button / two-finger pan that emitted no trailing click
+    // can't swallow the next genuine click.
+    dragged = false;
     if (shouldIgnore(event.target)) return;
 
     active = true;
-    dragged = false;
     pointerId = event.pointerId;
     startX = event.clientX;
     startScroll = kanban.scrollLeft;
@@ -569,4 +572,123 @@ export function enableKanbanDragScroll() {
     },
     true
   );
+
+  // --- Both-button mouse drag + two-finger touch drag -----------------------
+  // A second panning affordance that works ANYWHERE on the board, including
+  // directly over cards. A plain left-click / single-finger tap is left to the
+  // cards (so they still open + drag); holding *both* mouse buttons, or dragging
+  // with *two fingers*, pans the board horizontally without engaging a card.
+  let bothBtnPanning = false;
+  let bothBtnLastX = 0;
+  let suppressContextMenu = false;
+
+  // Pressing the second mouse button (buttons bitmask 1|2 === 3) arms the pan
+  // and cancels any single-button drag already in flight (see `active` above).
+  kanban.addEventListener("pointerdown", (event) => {
+    if (event.pointerType !== "mouse" || (event.buttons & 3) !== 3) return;
+    bothBtnPanning = true;
+    bothBtnLastX = event.clientX;
+    suppressContextMenu = true;
+    active = false; // hand control off from the left-button drag
+    kanban.classList.add("is-grabbing");
+  });
+
+  kanban.addEventListener("pointermove", (event) => {
+    if (event.pointerType !== "mouse") return;
+    const bothDown = (event.buttons & 3) === 3;
+    if (bothDown) {
+      event.preventDefault();
+      if (!bothBtnPanning) {
+        bothBtnPanning = true;
+        bothBtnLastX = event.clientX;
+        suppressContextMenu = true;
+        active = false;
+        kanban.classList.add("is-grabbing");
+        return;
+      }
+      const delta = event.clientX - bothBtnLastX;
+      if (delta) {
+        kanban.scrollLeft -= delta;
+        bothBtnLastX = event.clientX;
+        dragged = true; // eat the trailing synthetic click
+      }
+    } else if (bothBtnPanning) {
+      bothBtnPanning = false;
+      kanban.classList.remove("is-grabbing");
+    }
+  });
+
+  kanban.addEventListener("pointerup", (event) => {
+    if (event.pointerType === "mouse" && bothBtnPanning && (event.buttons & 3) !== 3) {
+      bothBtnPanning = false;
+      kanban.classList.remove("is-grabbing");
+    }
+  });
+
+  // Right-click handling on the board:
+  //  - after a both-button pan, swallow the trailing context menu;
+  //  - otherwise suppress the native browser menu everywhere EXCEPT over a card,
+  //    which owns its own context menu (see bindCardContextMenuDelegated).
+  kanban.addEventListener("contextmenu", (event) => {
+    if (suppressContextMenu) {
+      event.preventDefault();
+      event.stopPropagation();
+      suppressContextMenu = false;
+      return;
+    }
+    const onCard = event.target instanceof Element && event.target.closest(".card");
+    if (!onCard) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  });
+
+  // Two-finger touch pan. Touch events (not pointer events) are used here so we
+  // can reliably preventDefault the browser's native two-finger scroll/zoom.
+  let touchPanning = false;
+  let touchPanLastX = 0;
+  const twoFingerCentroidX = (touches) => (touches[0].clientX + touches[1].clientX) / 2;
+
+  kanban.addEventListener(
+    "touchstart",
+    (event) => {
+      // Fresh gesture — clear any leftover drag-click suppression so a real tap
+      // is never swallowed when the prior two-finger pan emitted no click.
+      dragged = false;
+      if (event.touches.length === 2) {
+        touchPanning = true;
+        touchPanLastX = twoFingerCentroidX(event.touches);
+        active = false; // cancel any single-finger drag that started
+        kanban.classList.add("is-grabbing");
+      } else {
+        touchPanning = false;
+      }
+    },
+    { passive: true }
+  );
+
+  kanban.addEventListener(
+    "touchmove",
+    (event) => {
+      if (!touchPanning || event.touches.length !== 2) return;
+      const x = twoFingerCentroidX(event.touches);
+      const delta = x - touchPanLastX;
+      if (delta) {
+        event.preventDefault();
+        kanban.scrollLeft -= delta;
+        touchPanLastX = x;
+        dragged = true; // eat the trailing tap so a card doesn't open
+      }
+    },
+    { passive: false }
+  );
+
+  const endTouchPan = (event) => {
+    if (event.touches.length < 2 && touchPanning) {
+      touchPanning = false;
+      kanban.classList.remove("is-grabbing");
+    }
+  };
+  kanban.addEventListener("touchend", endTouchPan, { passive: true });
+  kanban.addEventListener("touchcancel", endTouchPan, { passive: true });
 }

package/public/styles.css

@@ -2376,10 +2376,20 @@ select.detail-meta-badge::-ms-expand {
   grid-area: tabs;
   display: flex;
   gap: 0.3rem;
+  /* min-width:0 lets this grid item shrink to its column so the tabs overflow
+     *internally* and scroll, rather than being clipped by the drawer's
+     overflow:hidden. */
+  min-width: 0;
   overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
 
+.drawer-tabs::-webkit-scrollbar {
+  display: none;
+}
+
 .drawer-tabs[hidden] {
   display: none;
 }
@@ -4210,7 +4220,9 @@ details.section > summary .mcp-title-row {
 
 .lane-row {
   display: grid;
-  grid-template-columns: 2rem 2rem minmax(6rem, 1fr) minmax(5.5rem, 7rem) 2rem 2rem;
+  /* ↑ ↓ | name (flex) | New | ×  — every control is a 2rem square except the
+     name field, so the cluster stays tight at every width (fits phones too). */
+  grid-template-columns: 2rem 2rem minmax(4rem, 1fr) 2rem 2rem;
   gap: 0.4rem;
   align-items: center;
   border: 1px solid var(--line);
@@ -4451,7 +4463,8 @@ button:disabled {
 
 .lane-create-form {
   display: grid;
-  grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 9rem) auto;
+  /* name field (flex) + Add Lane button — two children, two columns. */
+  grid-template-columns: minmax(6rem, 1fr) auto;
   gap: 0.45rem;
   margin-top: 0.65rem;
 }
@@ -4873,22 +4886,47 @@ button.toast-close::after {
 
 /* Delay topbar wrap until small tablet/large phone widths. */
 @media (max-width: 800px) {
+  /* Let the topbar wrap into rows instead of stacking the brand above the
+     controls. Dissolving the `.controls` box (display:contents) promotes its
+     children into the topbar's own wrap flow, so the brand and the notes strip
+     share the first row (notes beside the badge, as on desktop) while search
+     and the action buttons fall onto their own rows below. */
   .topbar {
     position: static;
-    align-items: stretch;
-    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: 0.5rem;
+    row-gap: 0.55rem;
   }
 
   .controls {
-    flex-wrap: wrap;
-    justify-content: flex-start;
+    display: contents;
+  }
+
+  .topbar-controls-gap {
+    display: none;
   }
 
-  .topbar-controls-gap,
+  /* Clickable, truncated board-notes strip sits right after the badge, hugging
+     its text and ellipsizing if it runs long. Hidden when empty so the badge
+     keeps the row to itself (the logo still opens the notes popover). */
   .brand-notes-strip {
+    flex: 0 1 auto;
+    min-width: 0;
+    --topbar-notes-max-width: 100%;
+  }
+
+  .brand-notes-strip[data-empty="true"] {
     display: none;
   }
 
+  /* Reclaim vertical space for the board on mobile. */
+  .frame-footer {
+    display: none;
+  }
+
+  /* flex-basis 100% forces search onto its own full-width row below the brand. */
   .topbar-search {
     flex: 1 1 100%;
     width: 100%;
@@ -4896,14 +4934,12 @@ button.toast-close::after {
     max-width: none;
   }
 
-  /* On the wrapped action row, keep utility controls anchored to the right. */
+  /* On the wrapped action-button row, anchor the utility controls to the right. */
   #themeToggle {
     margin-left: auto;
   }
 
-  .composer-row,
-  .lane-row,
-  .lane-create-form {
+  .composer-row {
     grid-template-columns: 1fr 1fr;
   }
 
@@ -4917,10 +4953,16 @@ button.toast-close::after {
     flex-wrap: wrap;
   }
 
+  /* Phone: collapse the action controls to icon-only so New Card, Board, theme,
+     Help, and Settings all fit on a single line. */
+  .btn-sun-label,
+  .topbar-chip-label,
+  .topbar-btn-label {
+    display: none;
+  }
+
   .composer-row,
-  .deployment-actions,
-  .lane-row,
-  .lane-create-form {
+  .deployment-actions {
     grid-template-columns: 1fr;
   }