fix: Restore consistent horizontal page spacing BED-9094 by bfaulk96 · Pull Request #3074 · SpecterOps/BloodHound

bfaulk96 · 2026-07-30T16:13:16Z

Description

Restore MUI's responsive horizontal gutters on PageWithTitle at every viewport width, including when fullWidth removes the maximum-width constraint.
Disable gutters on the Administration routing container so nested PageWithTitle pages receive exactly one set of horizontal gutters.
Cover the default and fullWidth container behavior with focused unit tests.
Replace the outer Administration Box, which only supplied a className, with a native div as a small step away from unnecessary MUI wrappers.

Motivation and Context

PageWithTitle currently applies px-0 xl:px-6, which removes all horizontal page spacing below the xl breakpoint. Restoring the Container's default gutters fixes pages such as Download Collectors, My Profile, and API Explorer, but Administration already supplies its own Container gutters. Disabling those outer gutters makes PageWithTitle the single owner of page spacing and avoids doubled padding on pages such as Data Quality and Manage Users.

How Has This Been Tested?

Automated validation:

corepack yarn --cwd bhce workspace bh-shared-ui test PageWithTitle.test.tsx --run — 6 tests passed
just -f bhce/justfile prepare-for-codereview
just prepare-for-codereview

Extensive manual testing has also been done in both BHE and BHCE.

Regression coverage from BED-9094:

Verify Download Collectors, My Profile, and API Explorer at 1024px, 1279px, 1280px, and 1440px viewport widths.
Verify representative Administration pages such as File Ingest, Data Quality, Database Management, and Manage Users.
Confirm consistent spacing with the primary navigation expanded and collapsed.
Confirm fullWidth pages retain their responsive gutters without an xl maximum width.

Screenshots (optional):

See https://github.com/SpecterOps/bloodhound-enterprise/pull/1652

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

I have met the contributing prerequisites
- Assigned myself to this PR
- Added the appropriate labels
- Associated an issue: Issues and Pull Requests README #672
- Read the Contributing guide: https://github.com/SpecterOps/BloodHound/wiki/Contributing
I have ensured that related documentation is up-to-date
- Open API docs
- Code comments (GoDocs / JSDocs)
I have followed proper test practices
- Added/updated tests to cover my changes
- All new and existing tests passed

Summary by CodeRabbit

Bug Fixes / Improvements
- Refined PageWithTitle layout classes to improve consistent spacing while preserving maxWidth behavior and gutter handling.
- Updated the Administration page container to disable gutters while keeping maxWidth='xl'.
- Adjusted Swagger UI container styling and extended SCSS overrides to ensure operation filter text matches the intended color scheme.
Tests
- Added/expanded tests to verify PageWithTitle default vs. fullWidth behavior for gutters and maxWidth.

…ding on screens < XL

…ge-spacing

…eWithTitle. Not every PageWithTitle lives under the Administration container, so putting the gutter in the one shared place for all the pages allows for consistency

coderabbitai · 2026-07-30T16:13:58Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Updates shared, Administration, and Swagger UI layout classes. Adds tests for default and fullWidth PageWithTitle container behavior.

Changes

UI layout updates

Layer / File(s)	Summary
Page container layout and coverage `packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx`, `packages/javascript/bh-shared-ui/src/components/PageWithTitle.test.tsx`	Composes container classes with `cn`, removes responsive horizontal padding, and verifies default and `fullWidth` container behavior.
Administration container layout `cmd/ui/src/views/Administration/Administration.tsx`	Replaces the outer MUI `Box` with a `div` and disables gutters on the Administration container.
Swagger UI styling `packages/javascript/bh-shared-ui/src/views/ApiExplorer/swagger/OperationsLayoutPlugin.tsx`, `cmd/ui/src/styles/swagger-overrides.scss`	Changes the Swagger UI wrapper class and applies the text-color override to the operation filter input.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

SpecterOps/BloodHound#2987: Both changes update Swagger UI wrapper styling and .swagger-ui-scoped layout behavior.

Suggested labels: bug, user interface

Suggested reviewers: holocraft, thenando

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely matches the main change: restoring horizontal page spacing.
Description check	✅ Passed	The description follows the template with Description, Motivation and Context, Testing, Types of changes, and Checklist sections.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch BED-9094-fix-horizontal-page-spacing

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

Copilot

Pull request overview

Restores consistent responsive horizontal spacing across pages by relying on MUI Container’s default gutters in PageWithTitle, while preventing doubled gutters in the Administration route container.

Changes:

Removed Tailwind horizontal padding overrides from PageWithTitle so MUI’s responsive gutters apply at all viewport widths (including fullWidth).
Disabled gutters on the Administration routing Container and replaced the outer MUI Box wrapper with a native div.
Added unit tests to validate default vs fullWidth max-width/gutter behavior for PageWithTitle.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx	Stops overriding horizontal padding so `Container` default gutters handle responsive spacing consistently.
packages/javascript/bh-shared-ui/src/components/PageWithTitle.test.tsx	Adds focused tests asserting max-width and gutter behavior for default and `fullWidth` rendering.
cmd/ui/src/views/Administration/Administration.tsx	Disables outer Administration container gutters to avoid double horizontal padding when nested pages use `PageWithTitle`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

bfaulk96 · 2026-07-30T17:03:15Z


    return (
-        <Box className='flex h-full'>
+        <div className='flex h-full'>


Did this Box -> div since I know we're trying to inch away from MUI, and this is essentially a noop

…-fix-horizontal-page-spacing

…en searching

…mode

bfaulk96 added 3 commits July 29, 2026 11:44

fix(ui): fixed a regression to PageWithTitle causing 0 horizontal pad…

83f8b08

…ding on screens < XL

Merge remote-tracking branch 'origin' into BED-9094-fix-horizontal-pa…

a1f4049

…ge-spacing

remove gutters from admin containers and add consistent gutter to Pag…

f61d885

…eWithTitle. Not every PageWithTitle lives under the Administration container, so putting the gutter in the one shared place for all the pages allows for consistency

Copilot AI review requested due to automatic review settings July 30, 2026 16:13

bfaulk96 self-assigned this Jul 30, 2026

Copilot started reviewing on behalf of bfaulk96 July 30, 2026 16:13 View session

coderabbitai Bot added bug Something isn't working javascript Pull requests that update javascript code user interface A pull request containing changes affecting the UI code. labels Jul 30, 2026

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Comment thread packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx Outdated

bfaulk96 commented Jul 30, 2026

View reviewed changes

bfaulk96 added 2 commits July 30, 2026 13:07

merge className prop with PageWithTitle className

638a00c

Merge branch 'main' of github.com:SpecterOps/BloodHound into BED-9094…

b035a72

…-fix-horizontal-page-spacing

urangel reviewed Jul 30, 2026

View reviewed changes

Comment thread packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx Outdated

urangel approved these changes Jul 30, 2026

View reviewed changes

bfaulk96 added 5 commits July 30, 2026 14:21

Merge branch 'main' of github.com:SpecterOps/BloodHound into BED-9094…

289e03f

…-fix-horizontal-page-spacing

use cn utility class

43d9beb

Merge branch 'main' of github.com:SpecterOps/BloodHound into BED-9094…

d251896

…-fix-horizontal-page-spacing

fix: API explorer bug causing definitions to collapse horizontally wh…

b89281e

…en searching

fix: API explorer search bar text should appear white in dark mode

026ca6a

coderabbitai Bot removed the javascript Pull requests that update javascript code label Jul 30, 2026

bfaulk96 added 2 commits July 30, 2026 16:14

fix: API explorer "No operations..." text should be readable in dark …

37b05f0

…mode

chore: ran just prepare-for-codereview

28957ef

bfaulk96 enabled auto-merge (squash) July 30, 2026 20:31

bfaulk96 merged commit 74dd3da into main Jul 30, 2026
13 checks passed

bfaulk96 deleted the BED-9094-fix-horizontal-page-spacing branch July 30, 2026 20:42

github-actions Bot locked and limited conversation to collaborators Jul 30, 2026

Navigation Menu

Uh oh!

fix: Restore consistent horizontal page spacing BED-9094 - #3074

fix: Restore consistent horizontal page spacing BED-9094#3074
bfaulk96 merged 12 commits into
mainfrom
BED-9094-fix-horizontal-page-spacing

bfaulk96 commented Jul 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

bfaulk96 Jul 30, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

bfaulk96 commented Jul 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

How Has This Been Tested?

Screenshots (optional):

Types of changes

Checklist:

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

bfaulk96 Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bfaulk96 commented Jul 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading