JCU/fix(css): stop the page scrolling sideways at 390px

[Kasinhou]

Fixes L1 from the dataquest-dev/dspace-customers#853 review — the 390px case.

Problem

At 390px the page can be dragged sideways. Confirmed on dev-6.pc:8593:

window.innerWidth 390   documentElement.clientWidth 375   scrollWidth 395   -> 20px overflow

The two reported causes are false positives

Worth recording, because it would cost the next person the same hour.

The review named IMG.jcu-home-symbol (right=445) and NAV.navbar / DIV.navbar-inner-container
(right=406) as the culprits, calling the banner artwork "hlavní vinník". Both do have boxes that
stick out past the viewport — but getBoundingClientRect() reports geometry regardless of clipping,
and both are already clipped by an ancestor overflow: hidden:

• .jcu-home-banner (their parent) already sets overflow: hidden
• nav.navbar sets overflow: hidden on itself, and its positioned ancestor sets overflow-x: hidden

Hiding either changes the document's scrollWidth by 0px:

baseline                20
with symbol hidden      20
with navbar width fixed 20
with both               20

(navbar.component.scss:13 genuinely does use width: 100vw, which is scrollbar-inclusive and worth
cleaning up one day — but it is not what makes the page scroll.)

The real causes

Found by hiding each overflowing element in turn and re-measuring scrollWidth:

Element	Why	Contribution
footer ul.footer-info	d-flex with no flex-wrap — 5 links (Cookie settings / Accessibility / Privacy / EULA / Feedback) forced onto one row	20px → 8px
#mobile-navbar-toggler	ms-3 (1rem) left margin sitting next to a gapx-1 (0.25rem) icon cluster	the last 8px

Fix

- <ul class="footer-info list-unstyled d-flex justify-content-center mb-0">
+ <ul class="footer-info list-unstyled d-flex flex-wrap justify-content-center mb-0">

- <div id="mobile-navbar-toggler" class="d-block d-lg-none ms-3">
+ <div id="mobile-navbar-toggler" class="d-block d-lg-none ms-1 ms-sm-3">

The wide toggler gap now applies only from 576px up, where there is room for it.

The footer template lives in src/app/footer/ and the JCU custom theme's copies are 0-byte
scaffolding whose templateUrl points back at the base, so the base edit reaches the theme.

Verification

Local DSpace 9.3 stack from customer/jcu, viewport 390×844:

/home                 clientWidth 375   scrollWidth 375   overflow 0
/browse/title         375   375   0
/search               375   375   0
/communities/{uuid}   375   375   0
/items/{uuid}         375   375   0

Before — dev-6 at 390px

After — 390px, no overflow

Two things this does NOT fix

Measured, and deliberately left out rather than guessed at.

320px still overflows by 66px. The right-hand control cluster (#header-right: search, language,
help, impersonate, auth, toggler) is 216px on its own, against a 305px content width. Shrinking the
logo cannot close that — even at a 36px logo height (97×36) 24px remains:

logo height 52 (current)  ->  66px over
            48            ->  56
            44            ->  45
            40            ->  34
            36            ->  24

Letting #header-right shrink does reach 0, but the icons then overlap the logo — see
L1-3-rejected-shrink-causes-overlap-320px.png, which is why that route was rejected. Deciding what
to collapse or drop at 320px (move the language switch into the mobile menu?) is a design call for
JCU, not something to patch in silently.

768px overflows by 57px — not mentioned in the review at all. Culprit is ds-auth-nav-menu
inside #header-right, right edge 810 against clientWidth 753. Removing its me-auto, zeroing
min-width, and pinning its flex all change nothing, so it is a real layout problem at the md
breakpoint that needs its own investigation rather than being bundled in here.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Addresses a horizontal overflow issue at the 390px viewport case in the JCU/custom theme by adjusting two specific layout contributors so the document no longer gains extra scrollWidth.

Changes:

• Allow the footer “info links” row to wrap instead of forcing all links onto one line.
• Reduce the mobile navbar toggler’s left margin on the smallest breakpoint while preserving the larger spacing from sm (≥576px) upward.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/themes/custom/app/header/header.component.html	Reduces mobile toggler left margin at the smallest breakpoint to eliminate the last few pixels of overflow at 390px.
src/app/footer/footer.component.html	Adds flex-wrap to prevent footer links from forcing horizontal overflow at narrow widths.

---

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