Skip to content

refactor(layout): centralise content-area height in contentHeight() - #2680

Open
camielvs wants to merge 1 commit into
masterfrom
layout-content-height
Open

refactor(layout): centralise content-area height in contentHeight()#2680
camielvs wants to merge 1 commit into
masterfrom
layout-content-height

Conversation

@camielvs

@camielvs camielvs commented Aug 28, 2026

Copy link
Copy Markdown
Collaborator

Why

Six layouts each hardcode the same expression to fill the space under the top nav:

style={{ height: `calc(100vh - ${TOP_NAV_HEIGHT}px)` }}

Three of them subtract a second fixed amount on top of it (BOTTOM_FOOTER_HEIGHT, or a bare 48). Adding anything above the content area means finding and editing all six.

What

One helper, contentHeight(subtractPx?), in src/utils/layout.ts. Every call site now reads what it means rather than restating the arithmetic:

style={{ height: contentHeight() }}
style={{ maxHeight: contentHeight(BOTTOM_FOOTER_HEIGHT) }}

Call sites updated: ComponentDetail, ContextPanel, FlowSidebar, DashboardComponentsView, DashboardComponentsV2View, DashboardLayout.

Behaviour is unchanged at every call site — the emitted string is identical to what each one produced before, including the - 0px term that CSS calc() folds away. This is a pure de-duplication; it is not a prerequisite for anything and can be merged or dropped independently.

Six full-height layouts each rebuilt the same calc() expression from
TOP_NAV_HEIGHT by hand, two of them with a second subtraction for the
footer. Give them one helper so the arithmetic lives in a single place.

Behaviour is unchanged: every call site resolves to the same height it
did before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@camielvs
camielvs requested a review from a team as a code owner August 28, 2026 23:32
@github-actions

Copy link
Copy Markdown

🎩 Preview

A preview build has been created at: layout-content-height/d6c3bc1

Copy link
Copy Markdown
Collaborator Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant