Tighten supervisor dialog overlays

Author: pallyoung

packages/web/src/components/ui/modal/index.module.css

@@ -2,7 +2,7 @@
 :global(.modal-overlay) {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--z-modal-backdrop);
   display: flex;
   align-items: center;
   justify-content: center;

packages/web/src/components/ui/popover/index.module.css

@@ -11,7 +11,7 @@
   margin-top: 0;
   overflow: auto;
   outline: none;
-  z-index: var(--z-modal);
+  z-index: var(--z-popover);
   padding: var(--sp-3);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);

packages/web/src/features/supervisor/components/objective-dialog.test.tsx

@@ -179,7 +179,7 @@ describe("ObjectiveDialog", () => {
     expect(screen.getByRole("textbox", { name: "Objective" })).toHaveClass("input", "textarea");
   });
 
-  it("renders the intro strip in the desktop wrapper for enable mode", () => {
+  it("does not render the shared intro strip inside the desktop wrapper for enable mode", () => {
     const store = createStore();
     window.localStorage.setItem("ui.locale", JSON.stringify("en"));
     store.set(localeAtom, "en");
@@ -200,22 +200,12 @@ describe("ObjectiveDialog", () => {
 
     const dialog = screen.getByRole("dialog");
     const header = dialog.querySelector(".dialog-header");
-    const intro = dialog.querySelector(".supervisor-dialog-intro");
-    const introIcon = dialog.querySelector(".supervisor-dialog-intro__icon");
-    const introCopy = dialog.querySelector(".supervisor-dialog-intro__copy");
     const firstFormGroup = dialog.querySelector(".form-group");
 
     expect(header).toBeTruthy();
-    expect(intro).toBeTruthy();
-    expect(introIcon).toBeTruthy();
-    expect(introCopy).toBeTruthy();
-    expect(intro?.querySelector(".supervisor-dialog-intro__icon")).toBe(introIcon);
-    expect(intro?.querySelector(".supervisor-dialog-intro__copy")).toBe(introCopy);
-    expect(header?.contains(intro as Node)).toBe(false);
     expect(firstFormGroup).toBeTruthy();
-    expect(intro?.compareDocumentPosition(firstFormGroup as Node)).toBe(
-      Node.DOCUMENT_POSITION_FOLLOWING
-    );
+    expect(dialog.querySelector(".supervisor-dialog-intro")).toBeNull();
+    expect(header?.contains(firstFormGroup as Node)).toBe(false);
   });
 
   it("renders disable confirmation mode", () => {

packages/web/src/features/supervisor/views/shared/objective-dialog.tsx

@@ -61,7 +61,6 @@ export function ObjectiveDialog({ workspaceId, sessionId }: ObjectiveDialogProps
       <ModalBody>
         <ObjectiveDialogContent
           mode={mode}
-          showIntro
           draftObjective={dialog.draftObjective}
           draftEvaluatorProviderId={dialog.draftEvaluatorProviderId}
           draftEvaluatorModel={dialog.draftEvaluatorModel}

packages/web/src/styles/components.css

@@ -3993,7 +3993,7 @@ body.is-resizing-panels * {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: var(--z-modal-backdrop);
 }
 
 .modal-content {
@@ -10400,6 +10400,14 @@ textarea.input {
     overflow: auto;
   }
 
+  .mobile-supervisor-sheet__detail .input,
+  .mobile-supervisor-sheet__detail .mobile-select-trigger,
+  .mobile-supervisor-sheet__detail .textarea {
+    font-size: var(--type-label-size);
+    line-height: var(--type-label-line-height);
+    font-weight: var(--type-label-weight);
+  }
+
   .mobile-supervisor-sheet__actions,
   .mobile-supervisor-sheet__footer {
     display: grid;

packages/web/src/styles/components.theme.test.ts

@@ -56,6 +56,10 @@ const buttonStyles = readFileSync(
   `${process.cwd()}/src/components/ui/button/index.module.css`,
   "utf8"
 );
+const popoverStyles = readFileSync(
+  `${process.cwd()}/src/components/ui/popover/index.module.css`,
+  "utf8"
+);
 const inputStyles = readFileSync(
   `${process.cwd()}/src/components/ui/input/index.module.css`,
   "utf8"
@@ -387,6 +391,13 @@ describe("components.css theme-sensitive surfaces", () => {
     );
   });
 
+  it("keeps desktop popovers above modal shells so picker overlays are not occluded", () => {
+    expect(getLastRuleBlockFrom(modalStylesheet, ":global(.modal-overlay)")).toContain(
+      "z-index: var(--z-modal-backdrop)"
+    );
+    expect(getLastRuleBlockFrom(popoverStyles, ".content")).toContain("z-index: var(--z-popover)");
+  });
+
   it("maps display and status primitives onto semantic typography roles", () => {
     expect(getLastRuleBlockFrom(tagStyles, ":where(.tag)")).toContain(
       "font-size: var(--type-kicker-size)"
@@ -1172,6 +1183,9 @@ describe("components.css theme-sensitive surfaces", () => {
       /\s+/g,
       " "
     );
+    const supervisorDetailInputs = getLastGroupedRuleBlock(
+      /\.mobile-supervisor-sheet__detail \.input,\s*\n\s*\.mobile-supervisor-sheet__detail \.mobile-select-trigger,\s*\n\s*\.mobile-supervisor-sheet__detail \.textarea\s*\{([^}]*)\}/g
+    );
     const supervisorFullscreenFooter = getLastRuleBlock(
       ".mobile-supervisor-sheet.mobile-sheet--fullscreen .mobile-sheet__footer"
     ).replace(/\s+/g, " ");
@@ -1190,6 +1204,9 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(supervisorRoot).not.toContain("box-shadow:");
     expect(supervisorDetail).toContain("padding: var(--sp-3)");
     expect(supervisorDetail).toContain("padding-bottom: var(--sp-4)");
+    expect(supervisorDetailInputs).toContain("font-size: var(--type-label-size)");
+    expect(supervisorDetailInputs).toContain("line-height: var(--type-label-line-height)");
+    expect(supervisorDetailInputs).toContain("font-weight: var(--type-label-weight)");
     expect(supervisorDetail).not.toContain("border: 1px solid");
     expect(supervisorDetail).not.toContain("border-radius:");
     expect(supervisorDetail).not.toContain("box-shadow:");