fix: align label and value in ingested-data grids by OrriMandarin · Pull Request #1462 · checkmarble/marble-frontend

OrriMandarin · 2026-04-21T08:47:44Z

Summary

Vertically centers the label with its value in the four grid layouts used to display ingested data.
Fixes the visual misalignment in Customer hub, Case manager decision drawer, Screening request/query details, and Data Model Explorer.
Single-property CSS change per file (items-center) — no component-behavior changes.

Affected layouts

DataField — the canonical label/value row used across Customer hub, Case manager → screening object details, Ingested object modal, Table record preview drawer, Pivot details, Decision trigger-object panel.
CaseDetailTriggerObject — Case manager decision drawer, trigger-object grid.
DataListGrid — shared grid used in the screening request detail panel.
QueryObjectDetail inside ScreeningQueryDetail — screening query tab in the Case manager.

Note on history

The branch contains a few experimental commits explored during review (baseline alignment, column-split restructure) that were reverted. The last commit (center label and value in ingested-data grids) represents the final shipped diff; squash-merging is recommended.

Test plan

Customer hub: UUID / foreign-key / GPS-coords pills line up with their labels.
Case manager → decision drawer → trigger object: property/value rows line up.
Case manager → screening tab → query detail: rows (type + properties) line up.
Single-column and multi-column DataField layouts render without regressions.
Dark mode unaffected.

🤖 Generated with Claude Code

coderabbitai · 2026-04-21T08:47:51Z

Warning

Rate limit exceeded

@OrriMandarin has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 11 minutes and 38 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 11 minutes and 38 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 92852a44-06ab-4cd7-b678-6a2f10a3aa61

📥 Commits

Reviewing files that changed from the base of the PR and between ad8437a and 6aac101.

📒 Files selected for processing (5)

packages/app-builder/src/components/Data/DataVisualisation/DataField.tsx
packages/app-builder/src/components/Data/DataVisualisation/DataFields.tsx
packages/app-builder/src/components/DataModelExplorer/DataListGrid.tsx
packages/app-builder/src/components/Decisions/TriggerObjectDetail.tsx
packages/app-builder/src/components/Screenings/ScreeningQueryDetail.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch worktree-fix-copy-pill-alignment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Pascal-Delange

the change in the diff is not consistent with the PR desc ?

linear · 2026-04-21T09:20:14Z

MAR-1801 The labels on the UUIDs and GPS coordinate pills are misaligned.

OrriMandarin · 2026-04-21T09:58:44Z

The issue with this fix is that if we extend the value section (like when we want to view related ingested data), the label will be centered within this section and not align with the first element of the value.

An existing issue is that if the right section has a height element, the left section is also affected. Perhaps I can try to have independent left and right sections.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Remove min-h-8 and reduce vertical padding so the pill's natural height matches its sibling label's text line-box, aligning text baselines in the field grid (items-start). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Revert CopyToClipboardButton/Chip class tweaks and vertically center the DataField label inside its row via self-center, so pill and label align without changing the pill's design. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Use items-center on the grid instead of items-start so both cells (label and value) vertically center — fixing pill-vs-label alignment. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Apply the same items-center fix to CaseDetailTriggerObject (case manager decision panel), DataListGrid (screening request detail), and ScreeningQueryDetail so pill values align with their labels, matching the DataField fix. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

items-center breaks when the value is taller than one line — the label ends up in the middle of the cell instead of next to the first line. Switch to items-baseline so the label always aligns with the first text baseline of the value, whether the value is a pill, plain text, or a pill followed by a map/sub-grid. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Render 2-column / 3-column layouts as side-by-side flex grids instead of one shared grid, so an expanding cell in one column no longer stretches its sibling in the same row. Dropping auto-rows-[minmax(2rem,auto)] + items-stretch also lets rows fit their content, so items-baseline lines up labels and values cleanly for both text and pill values. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Apply items-center to the DataField subgrid, CaseDetailTriggerObject, DataListGrid, and ScreeningQueryDetail layouts so the label is vertically centered with its value (pill or text). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Customer hub uses layout=2-columns. Before, left and right shared grid rows, so expanding a right-hand cell (e.g. the related-ingested-data box under a foreign key) stretched the matching left-hand row with a gap of blank space. Split the fields into one grid per column so the two halves are independent; gap-y-2 keeps vertical spacing consistent inside each column regardless of what the other column does. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

…grids" This reverts commit ca343c7.

Customer hub uses layout=2-columns. Before, left and right shared grid rows, so expanding a right-hand cell (e.g. the related-ingested-data box under a foreign key) stretched the matching left-hand row with a gap of blank space. Split the fields into one grid per column so the two halves are independent; gap-y-2 keeps vertical spacing consistent inside each column regardless of what the other column does. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

OrriMandarin · 2026-04-21T10:11:32Z

Before:

After:

The only point is that the label is centered to the value part (in case we want to display the related ingested data), not aligned with the first line.

OrriMandarin · 2026-04-21T10:12:23Z

@ChibiBlasphem Can be interesting to have your opinion on this.

william-schlegel · 2026-04-21T12:27:34Z

  return (
    <DataFieldProvider value={contextValue}>
-      <div className="col-span-2 grid grid-cols-subgrid items-start">
+      <div className="col-span-2 grid grid-cols-subgrid items-center">


I’m not sure if vertically aligning is better than starting the alignment.
It’s usually better to have labels aligned at the top, especially when the content is tall.
Perhaps we should consult Maud about a design perspective.

william-schlegel · 2026-04-21T12:38:53Z

-      <div className="col-span-2 grid grid-cols-subgrid items-start">
+      <div className="col-span-2 grid grid-cols-subgrid items-center">
        <label htmlFor={field?.id} className="text-grey-secondary">
          {field?.name}


if there are issues with very long labels, you can add a truncate class

OrriMandarin self-assigned this Apr 21, 2026

Pascal-Delange reviewed Apr 21, 2026

View reviewed changes

OrriMandarin changed the title ~~fix: vertical alignment of copy-to-clipboard pills (UUID / GPS coords)~~ fix: align label and value in ingested-data grids Apr 21, 2026

OrriMandarin requested review from Pascal-Delange and william-schlegel April 21, 2026 09:58

OrriMandarin and others added 8 commits April 21, 2026 11:59

fix: vertical alignment of copy-to-clipboard pills (UUID / GPS coords)

b8cf581

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

center both label and value in DataField row

fd334b4

Use items-center on the grid instead of items-start so both cells (label and value) vertically center — fixing pill-vs-label alignment. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

OrriMandarin force-pushed the worktree-fix-copy-pill-alignment branch from 0f30f09 to 9fdb8fd Compare April 21, 2026 09:59

Pascal-Delange reviewed Apr 21, 2026

View reviewed changes

Comment thread packages/app-builder/src/components/Data/DataVisualisation/DataField.tsx Outdated

OrriMandarin and others added 2 commits April 21, 2026 12:05

Revert "split DataFields 2-col / 3-col into independent side-by-side …

75efb02

…grids" This reverts commit ca343c7.

OrriMandarin removed the request for review from william-schlegel April 21, 2026 10:07

OrriMandarin added help wanted Extra attention is needed do-not-merge labels Apr 21, 2026

OrriMandarin requested a review from ChibiBlasphem April 21, 2026 10:11

william-schlegel reviewed Apr 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: align label and value in ingested-data grids#1462

fix: align label and value in ingested-data grids#1462
OrriMandarin wants to merge 11 commits into
mainfrom
worktree-fix-copy-pill-alignment

OrriMandarin commented Apr 21, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 21, 2026 •

edited

Loading

Rate limit exceeded

Uh oh!

Pascal-Delange left a comment

Uh oh!

linear Bot commented Apr 21, 2026

Uh oh!

OrriMandarin commented Apr 21, 2026

Uh oh!

Uh oh!

OrriMandarin commented Apr 21, 2026

Uh oh!

OrriMandarin commented Apr 21, 2026

Uh oh!

william-schlegel Apr 21, 2026

Uh oh!

william-schlegel Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

OrriMandarin commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Affected layouts

Note on history

Test plan

Uh oh!

coderabbitai Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Uh oh!

Pascal-Delange left a comment

Choose a reason for hiding this comment

Uh oh!

linear Bot commented Apr 21, 2026

Uh oh!

OrriMandarin commented Apr 21, 2026

Uh oh!

Uh oh!

OrriMandarin commented Apr 21, 2026

Uh oh!

OrriMandarin commented Apr 21, 2026

Uh oh!

william-schlegel Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

william-schlegel Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

OrriMandarin commented Apr 21, 2026 •

edited

Loading

coderabbitai Bot commented Apr 21, 2026 •

edited

Loading