dfe-analytical-services / dfe-analytical-services/dfeshiny
[Bug]: Header Service Name collides and overlaps with Departmental Logo on wide views
- Dominant language
- R
- Stars
- 7
- Forks
- 3
- Avg merge
- 8h 54m
- Merged PRs (30d)
- 2
Description
## Description
When utilizing dfeshiny::header(header = "RISE Universal Hubs Tracker"), the HTML structure generated via shinyGovstyle::header() places the organization name container and the service name string inline. Due to rigid layout alignment and lack of clearance formatting, the service title shifts horizontally directly over the logo block instead of dropping cleanly onto a new text line or maintaining a safe padding boundary.
## How to reproduce
Call dfeshiny::header(header = "RISE Universal Hubs Tracker") inside a bslib::page_fluid() container.
Increase the browser viewport width.
Observe the service title overlapping the DfE header text.
## Expected behaviour
Either documentation to state header should be 20 characters or less
eg
```
#' @param header Service name to supplement the organisation name.
#' \strong{Guidance:} To align with the GOV.UK Design System and prevent
#' layout collisions with the logo container on standard viewports, keep this
#' concise (ideally under 20 characters).
```
Or a wider width in shinyGovestyle to allow for the extra characters added by having DfE typed out.
## Screenshots
If applicable, add screenshots to help explain your problem.
## Additional context
I reviewed the style guide and understand the reason for the width, so felt it appropriate to bring it back here to have the documentation reflect the issue is length of service name interacting with DfE text.
As such I will not be doing a pull request with a fix 👍
Contributor guide
Research direction
Reproduce the overlap with dfeshiny::header(header = "RISE Universal Hubs Tracker") inside bslib::page_fluid(), then inspect the HTML produced through shinyGovstyle::header(). Determine whether the completed change should document a service-name length limit or adjust the available header width, and verify the chosen behavior at a wide viewport.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- r
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100