Skip to content

fix(nav): stop project navbar items clipping off-screen #7968

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kyle-ssg wants to merge 4 commits into
base: main
Choose a base branch
from
+51 −40
Open

fix(nav): stop project navbar items clipping off-screen #7968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87a1748
fix(nav): stop project navbar items clipping off-screen
kyle-ssg Jul 8, 2026
f3ac95c
fix(nav): let organisation navbar admin links overflow independently
kyle-ssg Jul 8, 2026
3416939
perf(nav): coalesce overflow re-measures into one per frame
kyle-ssg Jul 8, 2026
67c8814
fix(nav): narrow overflow hook changes to the padding fix only
kyle-ssg Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion frontend/common/hooks/useOverflowVisibleCount.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,14 @@ export const useOverflowVisibleCount = ({
return totalWidths + totalGaps
}

const containerWidth = outerCont.clientWidth
// clientWidth includes the container's horizontal padding, which the items
// can't actually occupy. Subtract it so padded navbars don't over-estimate
// the available width and let items clip off-screen.
const outerStyle = getComputedStyle(outerCont)
const containerWidth =
outerCont.clientWidth -
(parseFloat(outerStyle.paddingLeft) || 0) -
(parseFloat(outerStyle.paddingRight) || 0)
// All items fit
if (sumWidths(widths.length) <= containerWidth) {
setVisibleCount(widths.length)
Expand Down
9 changes: 8 additions & 1 deletion frontend/web/components/navigation/OverflowNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,15 @@ const OverflowNav: FC<OverflowNavProps> = ({
'd-flex align-items-center',
)}
>
{/* Wrappers keep DOM children 1:1 with items so measured widths align,
even when an item renders nothing or multiple elements */}
{(isMeasuring ? items : visible).map((child, idx) => (
<React.Fragment key={idx}>{child}</React.Fragment>
<div
key={idx}
className={`d-flex align-items-center gap-${gap} flex-shrink-0`}
>
{child}
</div>
))}
</div>

Expand Down
37 changes: 18 additions & 19 deletions frontend/web/components/navigation/navbars/OrganisationNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,28 +42,27 @@ const OrganisationNavbar: FC<OrganisationNavType> = ({}) => {
Usage
</NavSubLink>
)}
{AccountStore.isAdmin() && (
<>
{Utils.getFlagsmithHasFeature('organisation_integrations') && (
<NavSubLink
icon={<Icon name='layers' />}
id='integrations-link'
to={`/organisation/${
AccountStore.getOrganisation().id
}/integrations`}
>
Organisation Integrations
</NavSubLink>
)}
{AccountStore.isAdmin() &&
Utils.getFlagsmithHasFeature('organisation_integrations') && (
<NavSubLink
icon={<Icon name='setting' width={24} />}
id='org-settings-link'
data-test='org-settings-link'
to={`/organisation/${AccountStore.getOrganisation().id}/settings`}
icon={<Icon name='layers' />}
id='integrations-link'
to={`/organisation/${
AccountStore.getOrganisation().id
}/integrations`}
>
Organisation Settings
Organisation Integrations
</NavSubLink>
</>
)}
{AccountStore.isAdmin() && (
<NavSubLink
icon={<Icon name='setting' width={24} />}
id='org-settings-link'
data-test='org-settings-link'
to={`/organisation/${AccountStore.getOrganisation().id}/settings`}
>
Organisation Settings
</NavSubLink>
)}
</OverflowNav>
)
Expand Down
36 changes: 17 additions & 19 deletions frontend/web/components/navigation/navbars/ProjectNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const ProjectNavbar: FC<ProjectNavType> = ({ environmentId, projectId }) => {
location.pathname.startsWith(`/project/${projectId}/lifecycle`)
}
>
Feature Lifecycle
Lifecycle
</NavSubLink>
)}
<Permission
Expand Down Expand Up @@ -114,25 +114,23 @@ const ProjectNavbar: FC<ProjectNavType> = ({ environmentId, projectId }) => {
>
Compare
</NavSubLink>
{projectAdmin && Utils.getFlagsmithHasFeature('release_pipelines') && (
<NavSubLink
icon={<Icon name='flash' />}
id='release-pipelines-link'
to={`/project/${projectId}/release-pipelines`}
>
Pipelines
</NavSubLink>
)}
{projectAdmin && (
<>
{Utils.getFlagsmithHasFeature('release_pipelines') && (
<NavSubLink
icon={<Icon name='flash' />}
id='release-pipelines-link'
to={`/project/${projectId}/release-pipelines`}
>
Release Pipelines
</NavSubLink>
)}
<NavSubLink
icon={<Icon name='setting' width={24} />}
id='project-settings-link'
to={`/project/${projectId}/settings`}
>
Project Settings
</NavSubLink>
</>
<NavSubLink
icon={<Icon name='setting' width={24} />}
id='project-settings-link'
to={`/project/${projectId}/settings`}
>
Project Settings
</NavSubLink>
)}
</OverflowNav>
)
Expand Down
Loading