From 7fc352c85db8e3499368c6dac517bd31c43e36d8 Mon Sep 17 00:00:00 2001
From: thomasbeaudry <waveflux@gmail.com>
Date: Wed, 14 Oct 2026 00:19:19 -0400
Subject: [PATCH 1/2] fix(web): align remote assignment table colors with
 datahub subject table

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/BulkRemoteAssignmentWizard/MapStep.tsx |  1 +
 .../BulkRemoteAssignmentWizard/SourceStep.tsx         | 11 +++++------
 .../BulkRemoteAssignmentWizard/WizardTable.tsx        |  2 +-
 .../DeleteRemoteAssignments.tsx                       |  1 -
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx b/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx
index 2dec22700..12e5d192c 100644
--- a/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx
+++ b/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx
@@ -121,6 +121,7 @@ export const MapStep = ({ groupName, onBack, onResolved, onStepChange, parsed }:
             {t({ en: 'Column Mapping', es: 'Correspondencia de columnas', fr: 'Correspondance des colonnes' })}
           </h3>
           <WizardTable
+            className="max-h-[28rem] overflow-y-auto"
             head={
               <React.Fragment>
                 <Table.Head>
diff --git a/apps/web/src/components/BulkRemoteAssignmentWizard/SourceStep.tsx b/apps/web/src/components/BulkRemoteAssignmentWizard/SourceStep.tsx
index 2901ca16f..95305c16e 100644
--- a/apps/web/src/components/BulkRemoteAssignmentWizard/SourceStep.tsx
+++ b/apps/web/src/components/BulkRemoteAssignmentWizard/SourceStep.tsx
@@ -258,7 +258,9 @@ export const SourceStep = ({
                           />
                         );
                       },
-                      id: 'select'
+                      id: 'select',
+                      maxSize: 40,
+                      size: 40
                     },
                     {
                       accessorKey: 'subject',
@@ -293,9 +295,6 @@ export const SourceStep = ({
                     }
                   ]}
                   data={rows}
-                  // The table paints its rows and ground in the page colour; inside the card they
-                  // take the card's, so the grid does not read as one more box.
-                  rootStyle={{ '--color-background': 'var(--color-card)' }}
                   onRowClick={(row) => toggle(row.id)}
                 />
               </div>
@@ -318,7 +317,7 @@ export const SourceStep = ({
                 'text/csv': ['.csv'],
                 'text/tab-separated-values': ['.tsv']
               }}
-              className="min-h-72"
+              className="bg-background min-h-72"
               data-testid="bulk-file-dropzone"
               description={ACCEPTED_FILE_EXTENSIONS.join(', ')}
               file={null}
@@ -337,7 +336,7 @@ export const SourceStep = ({
               })}
             </p>
             <TextArea
-              className="min-h-72"
+              className="bg-background min-h-72"
               data-testid="bulk-paste-input"
               rows={8}
               value={pasted}
diff --git a/apps/web/src/components/BulkRemoteAssignmentWizard/WizardTable.tsx b/apps/web/src/components/BulkRemoteAssignmentWizard/WizardTable.tsx
index 3937c7d57..3d862f57b 100644
--- a/apps/web/src/components/BulkRemoteAssignmentWizard/WizardTable.tsx
+++ b/apps/web/src/components/BulkRemoteAssignmentWizard/WizardTable.tsx
@@ -16,7 +16,7 @@ type WizardTableProps = {
  * header row, so the mapping, instrument, review and result tables all read as the same thing.
  */
 export const WizardTable = ({ children, className, 'data-testid': testId, head }: WizardTableProps) => (
-  <div className={cn('overflow-x-auto rounded-md border', className)} data-testid={testId}>
+  <div className={cn('bg-background overflow-x-auto rounded-md border', className)} data-testid={testId}>
     <Table>
       <Table.Header className="bg-muted/40">
         <Table.Row>{head}</Table.Row>
diff --git a/apps/web/src/components/DeleteRemoteAssignments/DeleteRemoteAssignments.tsx b/apps/web/src/components/DeleteRemoteAssignments/DeleteRemoteAssignments.tsx
index 4fa1b13fb..08484df9a 100644
--- a/apps/web/src/components/DeleteRemoteAssignments/DeleteRemoteAssignments.tsx
+++ b/apps/web/src/components/DeleteRemoteAssignments/DeleteRemoteAssignments.tsx
@@ -221,7 +221,6 @@ export const DeleteRemoteAssignments = ({ groupId, onBack, subjectIdDisplayLengt
               }
             ]}
             data={rows}
-            rootStyle={{ '--color-background': 'var(--color-card)' }}
             onRowClick={(row) => toggle(row.id)}
           />
         )}

From 22c5f85935ebcf6d551fb6c88d0bd596c0a44a38 Mon Sep 17 00:00:00 2001
From: thomasbeaudry <waveflux@gmail.com>
Date: Sat, 17 Oct 2026 00:42:55 -0400
Subject: [PATCH 2/2] test: cover the capped column mapping table and the
 wizard table surface

Adds the tests the review asked for:

- An e2e case loading a 24-column file through the wizard, asserting the
  mapping frame stays within its 28rem cap and scrolls inside itself.
- A MapStep case pinning the cap and the vertical scroll on that frame.
- A WizardTable case pinning `bg-background` against a caller's own class,
  since `cn` lets a later class win and inheriting the card surface is what
  made these tables read differently from the subject table.

Both new cases were confirmed to fail with the cap removed.

`bulk-column-mapping` moves onto the WizardTable frame, which is the element
that actually scrolls; the wrapper around it holds the heading too, so its
height is never the capped one. Nothing read the id before.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../BulkRemoteAssignmentWizard/MapStep.tsx    |  3 +-
 .../__tests__/MapStep.test.tsx                |  9 ++++
 .../__tests__/WizardTable.test.tsx            | 11 +++++
 .../_app/group/remote-assignments.page.ts     | 17 +++++++
 .../specs/remote-assignments-wizard.spec.ts   | 44 +++++++++++++++++++
 5 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx b/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx
index 12e5d192c..43357814b 100644
--- a/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx
+++ b/apps/web/src/components/BulkRemoteAssignmentWizard/MapStep.tsx
@@ -116,12 +116,13 @@ export const MapStep = ({ groupName, onBack, onResolved, onStepChange, parsed }:
           </p>
         )}
 
-        <div className="flex flex-col gap-2" data-testid="bulk-column-mapping">
+        <div className="flex flex-col gap-2">
           <h3 className="text-sm font-medium">
             {t({ en: 'Column Mapping', es: 'Correspondencia de columnas', fr: 'Correspondance des colonnes' })}
           </h3>
           <WizardTable
             className="max-h-[28rem] overflow-y-auto"
+            data-testid="bulk-column-mapping"
             head={
               <React.Fragment>
                 <Table.Head>
diff --git a/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/MapStep.test.tsx b/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/MapStep.test.tsx
index 7dcf8ff88..bfa0a2ab8 100644
--- a/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/MapStep.test.tsx
+++ b/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/MapStep.test.tsx
@@ -71,6 +71,15 @@ describe('MapStep', () => {
     expect(cells.map(({ textContent }) => textContent)).toEqual(['001', 'Alice', '002', 'Bob']);
   });
 
+  // A file with many columns grew the mapping table until the Continue button sat below the fold,
+  // so the frame is capped and scrolls within itself rather than lengthening the step.
+  it('should cap the column mapping table and scroll it, so a wide file cannot push the step controls away', () => {
+    renderMapStep(byId);
+    const frame = screen.getByTestId('bulk-column-mapping');
+    expect(frame.classList.contains('max-h-[28rem]')).toBe(true);
+    expect(frame.classList.contains('overflow-y-auto')).toBe(true);
+  });
+
   it('should badge a file with a subject ID column as identified by ID', () => {
     renderMapStep(byId);
     expect(screen.getByTestId('bulk-detected-mode').textContent).toBe('Subject ID');
diff --git a/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/WizardTable.test.tsx b/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/WizardTable.test.tsx
index ee18ae9a6..4d764e504 100644
--- a/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/WizardTable.test.tsx
+++ b/apps/web/src/components/BulkRemoteAssignmentWizard/__tests__/WizardTable.test.tsx
@@ -29,4 +29,15 @@ describe('WizardTable', () => {
     );
     expect(screen.getByTestId('wizard-table').classList.contains('mt-4')).toBe(true);
   });
+
+  // `cn` lets a later class win, so a caller's own class must not cost the frame its surface —
+  // inheriting the card colour is what made these tables read differently from the subject table.
+  it('should keep the page background when a caller passes its own class', () => {
+    render(
+      <WizardTable className="mt-4" data-testid="wizard-table" head={<th>{headLabel}</th>}>
+        {null}
+      </WizardTable>
+    );
+    expect(screen.getByTestId('wizard-table').classList.contains('bg-background')).toBe(true);
+  });
 });
diff --git a/testing/src/pages/_app/group/remote-assignments.page.ts b/testing/src/pages/_app/group/remote-assignments.page.ts
index 2fb3473e8..5e9d2b71a 100644
--- a/testing/src/pages/_app/group/remote-assignments.page.ts
+++ b/testing/src/pages/_app/group/remote-assignments.page.ts
@@ -6,8 +6,12 @@ type WizardStepName = 'INSTRUMENTS' | 'REVIEW' | 'SUBJECTS';
 
 export class RemoteAssignmentsPage extends AppPage {
   readonly breadcrumbs: Locator;
+  /** The scrolling frame around the column mapping grid, capped so a wide file cannot lengthen the step. */
+  readonly columnMapping: Locator;
   /** The page column the wizard must fit inside; `Layout` renders exactly one `main`. */
   readonly container: Locator;
+  readonly fileInput: Locator;
+  readonly mapStep: Locator;
   readonly selectAllSubjects: Locator;
   readonly timepointsStep: Locator;
   readonly useSelectedSubjects: Locator;
@@ -16,7 +20,12 @@ export class RemoteAssignmentsPage extends AppPage {
   constructor(page: Page) {
     super(page);
     this.breadcrumbs = page.getByTestId('bulk-breadcrumbs');
+    this.columnMapping = page.getByTestId('bulk-column-mapping');
     this.container = page.locator('main');
+    // libui's FileDropzone hardcodes its own testid and forwards none, so the `bulk-file-dropzone`
+    // the wizard passes it never reaches the DOM.
+    this.fileInput = page.getByTestId('dropzone').locator('input[type="file"]');
+    this.mapStep = page.getByTestId('bulk-map-step');
     this.selectAllSubjects = page.getByTestId('bulk-select-all-subjects');
     this.timepointsStep = page.getByTestId('bulk-timepoints-step');
     this.useSelectedSubjects = page.getByTestId('bulk-use-selected-subjects');
@@ -26,4 +35,12 @@ export class RemoteAssignmentsPage extends AppPage {
   breadcrumb(step: WizardStepName): Locator {
     return this.$ref.getByTestId(`bulk-breadcrumb-${step}`);
   }
+
+  async sourceMode(mode: 'FILE' | 'PASTE' | 'SELECT') {
+    await this.$ref.getByTestId(`bulk-source-mode-${mode}`).click();
+  }
+
+  async uploadFile(file: Parameters<Locator['setInputFiles']>[0]) {
+    await this.fileInput.setInputFiles(file);
+  }
 }
diff --git a/testing/src/specs/remote-assignments-wizard.spec.ts b/testing/src/specs/remote-assignments-wizard.spec.ts
index d14a6c1f6..f6b32c669 100644
--- a/testing/src/specs/remote-assignments-wizard.spec.ts
+++ b/testing/src/specs/remote-assignments-wizard.spec.ts
@@ -71,4 +71,48 @@ test.describe('remote assignments wizard', () => {
     await expect(wizardPage.breadcrumb('INSTRUMENTS')).toHaveAttribute('aria-current', 'step');
     await expect(wizardPage.breadcrumb('SUBJECTS')).toBeEnabled();
   });
+
+  /** One row under a header of `columnCount` columns, the first of which is the subject id. */
+  const wideCsv = (columnCount: number, uniqueId: string) => {
+    const headers = ['subject_id', ...Array.from({ length: columnCount - 1 }, (_, index) => `extra_${index}`)];
+    const row = [`wide_${uniqueId}`, ...Array.from({ length: columnCount - 1 }, (_, index) => `value_${index}`)];
+    return `${headers.join(',')}\n${row.join(',')}\n`;
+  };
+
+  // A file with many columns grew the mapping table until the step's own controls sat below the
+  // fold, so the frame is capped at 28rem and scrolls within itself instead.
+  test('should cap the column mapping table and scroll it rather than lengthening the step', async ({
+    api,
+    authenticateAs,
+    page,
+    uniqueId
+  }) => {
+    const group = await api.createGroup({ name: `WizardWide${uniqueId}` });
+    const { credentials } = await api.createUser({ basePermissionLevel: 'GROUP_MANAGER', groupIds: [group.id] });
+
+    await authenticateAs(credentials);
+    await page.goto('/group/remote-assignments?mode=create');
+    const wizardPage = new RemoteAssignmentsPage(page);
+    await expect(wizardPage.wizard).toBeVisible();
+
+    await wizardPage.sourceMode('FILE');
+    await wizardPage.uploadFile({
+      buffer: Buffer.from(wideCsv(24, uniqueId)),
+      mimeType: 'text/csv',
+      name: 'wide.csv'
+    });
+
+    await expect(wizardPage.mapStep).toBeVisible();
+    // One row per column of the file, so the grid is certainly taller than the cap.
+    await expect(wizardPage.columnMapping.locator('tbody tr')).toHaveCount(24);
+
+    const mapping = await boundingBox(wizardPage.columnMapping);
+    expect(mapping.height).toBeLessThanOrEqual(448);
+
+    const [scrollHeight, clientHeight] = await wizardPage.columnMapping.evaluate((element) => [
+      element.scrollHeight,
+      element.clientHeight
+    ]);
+    expect(scrollHeight).toBeGreaterThan(clientHeight);
+  });
 });