fix(admin): align table columns with page header by paanSinghCoder · Pull Request #1642 · raystack/frontier

paanSinghCoder · 2026-05-22T06:17:30Z

Fixes column-edge misalignment across admin tables relative to the page navbar/title.

Right edge (action column): widen `.table-action-column` to `var(--rs-space-12)` so the `⋮` icon doesn't hug the page edge.
- org members, org projects
Left edge (first column): apply `.first-column { padding-left: var(--rs-space-7) }` via column `classNames.cell` / `classNames.header`. Several pages were missing this; the top-level invoices page had a `:first-child` selector that didn't match the virtualized DataTable's `
` cells.
- invoices, roles, products, products/prices, plans, webhooks, preferences, admins

Several admin tables had misaligned column edges relative to the page title/navbar: - Action column hugged the table's right edge on members and projects detail pages — widened the action column to var(--rs-space-12) so the three-dots icon sits inset to match the navbar. - First column hugged the table's left edge on several routes (no padding-left, or a :first-child selector that didn't match the virtualized DataTable's <div> cells). Switched each to a class-based .first-column { padding-left: var(--rs-space-7) } applied via the column's classNames.cell / classNames.header so the first column lines up with the page title. Pages touched: members, projects, invoices (top-level), roles, products, products/prices, plans, webhooks, preferences, admins. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

vercel · 2026-05-22T06:17:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	May 22, 2026 6:23am

coderabbitai · 2026-05-22T06:17:45Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b9943b88-0f3f-4e1e-ae1e-be7cefa87358

📥 Commits

Reviewing files that changed from the base of the PR and between b3c58df and 4031f48.

📒 Files selected for processing (1)

web/sdk/admin/views/users/details/layout/side-panel.module.css

✅ Files skipped from review due to trivial changes (1)

web/sdk/admin/views/users/details/layout/side-panel.module.css

📝 Walkthrough

Summary by CodeRabbit

Release Notes

Style
- Standardized first-column padding across admin tables using design tokens.
- Replaced hardcoded column/action widths and paddings with CSS design-system variables for consistent spacing.
- Adjusted menu item and side-panel spacing to use token-based paddings.
Tests
- Added test identifiers to invoice and plan navigation links for improved testability.

Walkthrough

Adds .first-column CSS rules in multiple admin CSS modules and updates table column definitions to import and apply that class to both header and cell. Replaces several hardcoded spacing values with design-token variables and adds data-test-id attributes to some linkable cells.

Changes

Admin UI Table Column Styling Standardization

Layer / File(s)	Summary
First-column CSS class pattern across admin views `web/sdk/admin/views/admins/`, `web/sdk/admin/views/invoices/`, `web/sdk/admin/views/plans/`, `web/sdk/admin/views/preferences/`, `web/sdk/admin/views/products/`, `web/sdk/admin/views/products/prices/`, `web/sdk/admin/views/roles/`, `web/sdk/admin/views/webhooks/webhooks/`	Adds `.first-column` CSS rules to multiple module stylesheets, imports those CSS modules in corresponding `columns.tsx` files, and sets `classNames` for both `cell` and `header` to `styles["first-column"]`. Also adds `data-test-id` attributes to invoice and plan link renderers.
Spacing variable replacements for consistency `web/sdk/admin/views/organizations/details/members/members.module.css`, `web/sdk/admin/views/organizations/details/projects/projects.module.css`, `web/sdk/admin/views/webhooks/webhooks/webhooks.module.css`, `web/sdk/admin/views/users/details/layout/side-panel.module.css`	Replaces hardcoded pixel values with design-token variables: `.table-action-column` width changed to `var(--rs-space-12)`, `.deleteMenuItem` padding changed to `var(--rs-space-4)`, and `.side-panel` bottom padding changed to `var(--rs-space-15)`.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested Labels

bug

Suggested Reviewers

rsbh

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

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.}

Replaces the hardcoded 80px padding-bottom with var(--rs-space-15). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

coveralls · 2026-05-22T06:24:02Z

Coverage Report for CI Build 26272012057

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Warning

No base build found for commit 906d529 on main.
Coverage changes can't be calculated without a base build.
If a base build is processing, this comment will update automatically when it completes.

Coverage: 42.592%

Details

Patch coverage: No coverable lines changed in this PR.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

Requires a base build to compare against. How to fix this →

Coverage Stats


Relevant Lines:	37953
Covered Lines:	16165
Line Coverage:	42.59%
Coverage Strength:	11.91 hits per line

💛 - Coveralls

vercel Bot deployed to Preview May 22, 2026 06:17 View deployment

paanSinghCoder requested review from rohilsurana and rsbh May 22, 2026 06:18

fix(admin): use apsara spacing token for user side-panel padding

4031f48

Replaces the hardcoded 80px padding-bottom with var(--rs-space-15). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview May 22, 2026 06:23 View deployment

rsbh approved these changes May 22, 2026

View reviewed changes

paanSinghCoder enabled auto-merge (squash) May 22, 2026 06:26

paanSinghCoder merged commit a9f2e87 into main May 22, 2026
8 checks passed

paanSinghCoder deleted the fix/admin-tables-alignment branch May 22, 2026 06:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(admin): align table columns with page header#1642

fix(admin): align table columns with page header#1642
paanSinghCoder merged 2 commits into
mainfrom
fix/admin-tables-alignment

paanSinghCoder commented May 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 22, 2026 •

edited

Loading

Summary by CodeRabbit

Release Notes

Walkthrough

Changes

Estimated Code Review Effort

Suggested Labels

Suggested Reviewers

Uh oh!

coveralls commented May 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

paanSinghCoder commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Summary by CodeRabbit

Release Notes

Walkthrough

Changes

Estimated Code Review Effort

Suggested Labels

Suggested Reviewers

Uh oh!

coveralls commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for CI Build 26272012057

Coverage: 42.592%

Details

Uncovered Changes

Coverage Regressions

Coverage Stats

💛 - Coveralls

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

paanSinghCoder commented May 22, 2026 •

edited

Loading

vercel Bot commented May 22, 2026 •

edited

Loading

coderabbitai Bot commented May 22, 2026 •

edited

Loading

coveralls commented May 22, 2026 •

edited

Loading