fix(HAI-067): fix tooltip stacking context and background variable

- Add position: relative and z-index: 1 to .card-meta so dep tooltip renders above .card-title
- Change tooltip background from var(--bg-card) to var(--surface) for correct theming
- Add test asserting data-tooltip attribute contains dependency IDs as readable string

packages/dashboard/app/components/__tests__/TaskCard.test.tsx

@@ -154,6 +154,16 @@ describe("TaskCard dependency tooltip", () => {
     const deps = ["HAI-001", "HAI-002", "HAI-003", "HAI-004"];
     expect(computeDepTooltip(deps)).toBe("HAI-001, HAI-002, HAI-003, HAI-004");
   });
+
+  it("data-tooltip attribute contains dependency IDs as a readable string", () => {
+    const deps = ["HAI-005", "HAI-012"];
+    const tooltip = computeDepTooltip(deps);
+    expect(tooltip).toBeDefined();
+    // Each dependency ID should appear in the tooltip
+    for (const dep of deps) {
+      expect(tooltip).toContain(dep);
+    }
+  });
 });
 
 describe("TaskCard queued badge logic", () => {

packages/dashboard/app/styles.css

@@ -245,6 +245,7 @@ html, body {
   word-break: break-word;
 }
 
+/* z-index + position: relative so .card-dep-badge tooltip renders above .card-title */
 .card-meta {
   display: flex;
   align-items: center;
@@ -252,6 +253,8 @@ html, body {
   margin-top: 8px;
   font-size: 11px;
   color: var(--text-dim);
+  position: relative;
+  z-index: 1;
 }
 
 .card-status-badge {
@@ -299,7 +302,7 @@ html, body {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  background: var(--bg-card);
+  background: var(--surface);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 6px;