daily-focus 0.1.1-dev.11 → 0.1.1-dev.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daily-focus",
-  "version": "0.1.1-dev.11",
+  "version": "0.1.1-dev.8",
   "description": "An interactive dashboard of what you should focus on today at work",
   "keywords": [
     "dashboard",

package/public/app.js

@@ -2653,7 +2653,6 @@ function renderActions(item, state2, ui2, handlers2) {
           {
             type: "button",
             class: "button",
-            "aria-haspopup": "menu",
             "aria-expanded": String(ui2.menuFor.value === item.id),
             onClick: () => handlers2.toggleMenu(item.id)
           },
@@ -2677,9 +2676,9 @@ function renderSnoozeMenu(item, now, handlers2, { indefinite = true, longRange =
     presets.push(["Next month", addMonths(now, 1), true], ["Next quarter", addMonths(now, 3), true]);
   }
   let dateInput = null;
-  return k(
-    Menu,
-    { class: "menu" },
+  return el(
+    "div",
+    { class: "menu", role: "menu" },
     presets.map(
       ([label, until, dated]) => el(
         "button",
@@ -2728,14 +2727,6 @@ function renderSnoozeMenu(item, now, handlers2, { indefinite = true, longRange =
     )
   );
 }
-function Menu({ class: className, children }) {
-  const ref = A2(null);
-  _2(() => {
-    const node = ref.current;
-    if (node?.showPopover && !node.matches(":popover-open")) node.showPopover();
-  });
-  return el("div", { class: className, role: "menu", popover: "manual", ref }, children);
-}
 function addDays(from, days) {
   return localDateKey(new Date(from.getFullYear(), from.getMonth(), from.getDate() + days));
 }
@@ -3078,7 +3069,6 @@ function renderPullActions(row, ui2, handlers2) {
           type: "button",
           class: "button",
           title: "Park this until a date",
-          "aria-haspopup": "menu",
           "aria-expanded": String(ui2.menuFor.value === row.id),
           onClick: () => handlers2.toggleMenu(row.id)
         },
@@ -3330,7 +3320,6 @@ function renderTicketStatus(row, state2, ui2, handlers2) {
         type: "button",
         class: "pill pill--status pill--button",
         title: `Move ${row.key} to another status`,
-        "aria-haspopup": "menu",
         "aria-expanded": String(ui2.statusFor.value === row.id),
         onClick: () => handlers2.toggleStatus(row.id)
       },
@@ -3347,9 +3336,9 @@ function ticketStatusOptions(row, state2) {
 }
 function renderStatusMenu(row, offered, ui2, handlers2) {
   const busy = ui2.pending.value.has(row.id);
-  return k(
-    Menu,
-    { class: "menu menu--status" },
+  return el(
+    "div",
+    { class: "menu menu--status", role: "menu" },
     offered.map(
       (status) => el(
         "button",
@@ -3400,7 +3389,6 @@ function renderTicketActions(row, ui2, handlers2) {
           type: "button",
           class: "button",
           title: "Park this until a date",
-          "aria-haspopup": "menu",
           "aria-expanded": String(ui2.menuFor.value === row.id),
           onClick: () => handlers2.toggleMenu(row.id)
         },

package/public/style.css

@@ -1152,29 +1152,14 @@ body[data-session-active='true'] #today .item:not([data-running='true']):focus-w
 
 /* snooze menu */
 
-/*
- * A popover in the top layer (`Menu` in client/items.ts says why), hung from the
- * button that opened it. Only one menu is ever open, so only one button is
- * expanded and the one anchor name is never ambiguous. `inset` and `margin`
- * undo the popover's own centring on the viewport.
- */
-[aria-haspopup='menu'][aria-expanded='true'] {
-  anchor-name: --menu;
-}
-
 .menu {
-  position: fixed;
-  position-anchor: --menu;
-  inset: auto;
-  top: anchor(bottom);
-  right: anchor(right);
-  margin: 4px 0;
-  /* Above the button instead, when the window has no room left below it. */
-  position-try-fallbacks: flip-block;
+  position: absolute;
+  top: 34px;
+  right: 10px;
+  z-index: 5;
   /* Wide enough that the date field below still shows its own placeholder. */
   min-width: 204px;
   padding: 5px;
-  color: var(--ink-2);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -1651,11 +1636,10 @@ body[data-view='settings'] .layout {
  * line up with the other tabs' however wide the display is. The 460px floor is
  * what drops it to one column on a narrow window rather than squeezing two.
  *
- * An absolutely positioned child is still fragmented by the columns, and counts
- * toward balancing them. `.item__actions` stays inside its card, so it travels
- * with the card into its column and nothing notices. Anything that hangs below a
- * card must not be in here at all: the row menus once were, and were split
- * across both columns and pushed the next section down. They are popovers now.
+ * The abspos worry that picked the grid does not apply: `.item` is
+ * `position: relative`, so `.item__actions` and the snooze `.menu` resolve
+ * against the card and travel with it into its column. Only a child resolving
+ * against the multicol container itself would land beside the wrong row.
  */
 #tickets .list {
   display: block;
@@ -1852,13 +1836,14 @@ body[data-view='settings'] .layout {
 }
 
 /*
- * Hung from the pill's left edge, where the park menu hangs from its button's
- * right: the pill sits in the card's left gutter, so each menu opens toward the
- * middle of its own card.
+ * Anchored to the gutter rather than the card's right edge, unlike the park
+ * menu: it belongs to the pill that opened it, and the two menus must not be
+ * able to appear in the same place.
  */
 .menu--status {
+  top: 26px;
   right: auto;
-  left: anchor(left);
+  left: 0;
   min-width: 9rem;
 }