fix: use fixed table layout and constrain column widths in HeadersTable

[impoiler]

Summary

Fixes layout issues in the HeadersTable component where columns were not properly constrained, causing inconsistent sizing of the Name, Value, and Actions columns.

Changes

• Applied table-fixed layout to the table to enforce column width constraints
• Set the Name column to a fixed width of 40% to ensure consistent proportions between Name and Value columns
• Reduced the Actions column width from w-12 to w-10 and removed excess padding (p-0) to tighten the delete button column
• Removed padding from the Actions cell to better align the delete button within its column

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

Navigate to any view that renders the HeadersTable component (e.g., a request headers configuration panel) and verify:

1. The Name and Value columns maintain consistent proportions as rows are added or removed.
2. The Actions (delete) column remains compact and does not expand unexpectedly.
3. Long header names or values do not cause the table layout to shift.

cd ui
pnpm i || npm i
pnpm build || npm run build

Screenshots/Recordings

Add before/after screenshots showing the corrected column widths in the headers table.

Breaking changes

• Yes
• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

Summary by CodeRabbit

• Style
  • Implemented fixed table layout to ensure consistent column widths and improved visual stability.
  • Refined header and action column sizing for better alignment and visual consistency.
  • Optimized spacing in the actions column for improved usability of row control buttons.

[impoiler]

• fix: use fixed table layout and constrain column widths in HeadersTable #3952 👈 (View in Graphite)
• fix: truncate long Y-axis labels with ellipsis and tooltip in dimension rankings chart #3950
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5c6bd8fd-beff-4ac2-8fc5-1cac1f9f32d6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The PR updates headersTable.tsx to refine table layout and spacing. The table now uses fixed layout to enforce predictable column widths, header cells are resized via updated class names, and the actions column padding is tightened for visual consistency.

Changes

Table layout and column spacing

Layer / File(s)	Summary
Table layout and column spacing adjustments ui/components/ui/headersTable.tsx	Fixed table layout is applied, header column class names are adjusted for width and padding, and the actions column body cell padding is reduced from p-2 to p-0 for tighter spacing around action buttons.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• maximhq/bifrost#3481: Both PRs change table components to use a fixed layout (table-fixed) and adjust column sizing/padding classes to keep columns aligned and action/header spacing consistent.

Suggested reviewers

• akshaydeo

Poem

🐰 A table once fluid, now fixed and aligned,
With headers and spacing all perfectly designed,
No more wayward columns or padding that's lax—
Our header rows gleam in their table-fixed tracks! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: applying fixed table layout and constraining column widths in the HeadersTable component.
Description check	✅ Passed	The description includes all critical sections: Summary, Changes, Type of change, Affected areas, How to test, Breaking changes, and Checklist. All required information is present.
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.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 06-01-fix_layout_shift_in_headers_table_during_typing

---

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

[impoiler]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[greptile-apps]

Confidence Score: 5/5

Safe to merge — the change is isolated to visual layout classes with no logic, data flow, or test attribute modifications.

Only Tailwind utility classes are touched: table-fixed, a percentage width on one column header, and padding resets on the Actions column. No data-testid attributes are removed or altered, no component logic changes, and no new dependencies are introduced.

No files require special attention.

Important Files Changed

Filename	Overview
ui/components/ui/headersTable.tsx	Pure layout change: adds table-fixed, sets Name column to 40% width, and tightens the Actions column header and cell padding to p-0/w-10. No logic, data, or data-testid changes.

_{Reviews (2): Last reviewed commit: "fix: layout shift in headers table durin..." | Re-trigger Greptile}

[akshaydeo]

Merge activity

• Jun 2, 6:11 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 2, 6:13 AM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.