Fix allocation pill menu clicks and center bar labels.

Stop outside pointer handlers from swallowing menu actions and use flex alignment on pill bars.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/projects/AllocationBarMenu.tsx

@@ -39,7 +39,7 @@ export function AllocationBarMenuTrigger({
         setTransferOpen(false);
       }
     };
-    const onDown = (event: MouseEvent) => {
+    const onPointerDown = (event: PointerEvent) => {
       const target = event.target as Node;
       if (triggerRef.current?.contains(target)) return;
       if (menuRef.current?.contains(target)) return;
@@ -47,10 +47,13 @@ export function AllocationBarMenuTrigger({
       setTransferOpen(false);
     };
     window.addEventListener("keydown", onKey);
-    window.addEventListener("mousedown", onDown);
+    const timer = window.setTimeout(() => {
+      window.addEventListener("pointerdown", onPointerDown);
+    }, 0);
     return () => {
+      window.clearTimeout(timer);
       window.removeEventListener("keydown", onKey);
-      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("pointerdown", onPointerDown);
     };
   }, [open]);
 
@@ -73,9 +76,11 @@ export function AllocationBarMenuTrigger({
     setTransferOpen(false);
   };
 
-  const run = (action: () => void) => {
-    action();
+  const run = (event: React.MouseEvent, action: () => void) => {
+    event.preventDefault();
+    event.stopPropagation();
     close();
+    window.setTimeout(() => action(), 0);
   };
 
   return (
@@ -96,17 +101,28 @@ export function AllocationBarMenuTrigger({
         ? createPortal(
             <div
               className="allocation-bar-menu"
+              onMouseDown={(event) => event.stopPropagation()}
+              onPointerDown={(event) => event.stopPropagation()}
               ref={menuRef}
-              style={{ position: "fixed", top: anchor.top, left: Math.max(8, anchor.left), zIndex: 1200 }}
+              style={{ position: "fixed", top: anchor.top, left: Math.max(8, anchor.left), zIndex: 3500 }}
             >
-              <button className="allocation-bar-menu-item" onClick={() => run(onEdit)} type="button">
+              <button
+                className="allocation-bar-menu-item"
+                onClick={(event) => run(event, onEdit)}
+                onMouseDown={(event) => event.stopPropagation()}
+                type="button"
+              >
                 Edit
               </button>
               {onTransferPerson && transferPeople.length > 0 ? (
                 <>
                   <button
                     className="allocation-bar-menu-item"
-                    onClick={() => setTransferOpen((value) => !value)}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      setTransferOpen((value) => !value);
+                    }}
+                    onMouseDown={(event) => event.stopPropagation()}
                     type="button"
                   >
                     Transfer
@@ -116,8 +132,12 @@ export function AllocationBarMenuTrigger({
                       <select
                         onChange={(event) => {
                           const id = Number(event.target.value);
-                          if (id) run(() => onTransferPerson(id));
+                          if (id) {
+                            close();
+                            window.setTimeout(() => onTransferPerson(id), 0);
+                          }
                         }}
+                        onMouseDown={(event) => event.stopPropagation()}
                         value=""
                       >
                         <option value="">Choose person…</option>
@@ -132,14 +152,20 @@ export function AllocationBarMenuTrigger({
                 </>
               ) : null}
               {onClone ? (
-                <button className="allocation-bar-menu-item" onClick={() => run(onClone)} type="button">
+                <button
+                  className="allocation-bar-menu-item"
+                  onClick={(event) => run(event, onClone)}
+                  onMouseDown={(event) => event.stopPropagation()}
+                  type="button"
+                >
                   Clone
                 </button>
               ) : null}
               {onSelectAllToRight ? (
                 <button
                   className="allocation-bar-menu-item"
-                  onClick={() => run(onSelectAllToRight)}
+                  onClick={(event) => run(event, onSelectAllToRight)}
+                  onMouseDown={(event) => event.stopPropagation()}
                   type="button"
                 >
                   Select All to Right
@@ -148,7 +174,8 @@ export function AllocationBarMenuTrigger({
               {onToggleMultiSelect ? (
                 <button
                   className="allocation-bar-menu-item"
-                  onClick={() => run(onToggleMultiSelect)}
+                  onClick={(event) => run(event, onToggleMultiSelect)}
+                  onMouseDown={(event) => event.stopPropagation()}
                   type="button"
                 >
                   {multiSelectActive ? "Disable Multi-Select Mode" : "Enable Multi-Select Mode"}
@@ -157,7 +184,8 @@ export function AllocationBarMenuTrigger({
               {onDelete ? (
                 <button
                   className="allocation-bar-menu-item is-danger"
-                  onClick={() => run(onDelete)}
+                  onClick={(event) => run(event, onDelete)}
+                  onMouseDown={(event) => event.stopPropagation()}
                   type="button"
                 >
                   Delete

frontend/src/components/projects/AllocationDragTimeline.tsx

@@ -116,7 +116,7 @@ export function AllocationDragTimeline({
 
   const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
     if (!trackRef.current || event.button !== 0) return;
-    if ((event.target as HTMLElement).closest(".allocation-bar")) return;
+    if ((event.target as HTMLElement).closest(".allocation-bar-host, .allocation-bar")) return;
     dragPointerRef.current = { x: event.clientX, y: event.clientY };
     const index = dayIndexFromPointer(event.clientX, trackRef.current.getBoundingClientRect(), totalDays);
     setDragRange({ start: index, end: index });
@@ -189,14 +189,14 @@ export function AllocationDragTimeline({
         ) : null}
         {existingSegment && weeklyCapacityHrs !== undefined && allocationPct !== undefined && allocation ? (
           <div
-            className={`allocation-bar-host ${existingSegment.className}${visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date) <= 1 ? " is-pill" : ""}${selected ? " is-selected" : ""}${cloneSourceId === allocation.id ? " is-clone-source" : ""}`}
+            className={`allocation-bar-host project-bar${visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date) <= 1 ? " is-pill" : " is-span"}${selected ? " is-selected" : ""}${cloneSourceId === allocation.id ? " is-clone-source" : ""}`}
             ref={barHostRef}
             style={{
               ...projectBarStyle(existingSegment, totalDays),
             }}
           >
             <button
-              className="allocation-bar-main"
+              className="allocation-bar-main project-bar allocation-bar"
               onClick={openEditPopover}
               onPointerDown={(event) => event.stopPropagation()}
               onPointerUp={(event) => event.stopPropagation()}

frontend/src/styles.css

@@ -2612,32 +2612,49 @@ th {
 }
 
 .allocation-bar-host {
-  align-items: stretch;
+  align-items: center;
   display: flex;
   gap: 0;
   overflow: visible;
+  position: absolute;
   z-index: 5;
 }
 
+.allocation-bar-host.is-span {
+  height: 36px;
+  top: 14px;
+}
+
 .allocation-bar-host .allocation-bar-main {
+  align-items: center;
   border: none;
   border-radius: inherit;
   color: inherit;
   cursor: pointer;
+  display: flex;
   flex: 1;
   font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  height: auto;
+  font-size: 12px;
+  font-weight: 700;
+  height: 100%;
+  justify-content: flex-start;
   left: auto;
+  line-height: 1;
   min-width: 0;
   overflow: hidden;
-  padding: inherit;
+  padding: 0 8px;
   position: relative;
   text-align: left;
   top: auto;
 }
 
+.allocation-bar-host .allocation-bar-main .planner-bar-label {
+  align-items: center;
+  display: flex;
+  line-height: 1.2;
+  padding: 0;
+}
+
 .allocation-bar-host.is-pill {
   border-radius: 999px;
   box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
@@ -2651,14 +2668,20 @@ th {
 .allocation-bar-host.is-pill .allocation-bar-main {
   border-radius: 999px 0 0 999px;
   color: #0f172a;
-  height: 30px;
   padding: 0 4px 0 10px;
 }
 
+.allocation-bar-host.is-pill .allocation-bar-main .planner-bar-label {
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .allocation-bar-host.is-pill .allocation-bar-menu-btn {
+  align-self: stretch;
   border-radius: 0 999px 999px 0;
   color: #1e40af;
-  height: 30px;
+  height: auto;
 }
 
 .allocation-bar-host.is-clone-source {
@@ -2692,6 +2715,7 @@ th {
   min-width: 220px;
   overflow: hidden;
   padding: 4px 0;
+  pointer-events: auto;
 }
 
 .allocation-bar-menu-item {
@@ -3172,24 +3196,7 @@ th {
   z-index: 5;
 }
 
-.project-bar.allocation-bar.is-pill {
-  border-radius: 999px;
-  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
-  color: #0f172a;
-  height: 30px;
-  min-width: 44px;
-  padding: 0 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 6;
-}
-
-.project-bar.allocation-bar.is-pill .planner-bar-label {
-  color: #0f172a;
-  font-size: 12px;
-  font-weight: 800;
-  padding: 0;
-}
+/* Pill layout handled by .allocation-bar-host.is-pill */
 
 .planner-row-archived {
   opacity: 0.55;