Fix navbar wrapping on medium screens

[AndreaBarbasso]

References

• Fixes Navbar's search/language/login buttons might wrap on medium screens #3512

Description

Removed a white-space: nowrap rule, added some flex-shrink and flex-grow classes, and removed a flex-wrap class so that the navbar is not wrapping anymore on two lines.

Instructions for Reviewers

As said on #3512, on medium-sized screens the navbar could wrap on another row if there were more than 3 items in it. This PR introduces some template and style changes to avoid this behavior.

List of changes in this PR:

• Removed a white-space: nowrap; rule` that was wrapping the navbar onto another row;
• Added rules so that the navbar items could break on multiple rows and avoid overflowing of the right-hand side action buttons.

To reproduce the issue you can simply duplicate a navbar item and resize the screen. With this PR there is no wrapping or overflowing of items.

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using npm run lint
• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• My PR aligns with Accessibility guidelines if it makes changes to the user interface.
• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[github-actions]

Hi @AndreaBarbasso,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[github-actions]

Hi @AndreaBarbasso,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[artlowel]

Thanks @AndreaBarbasso!

[dspace-bot]

Successfully created backport PR for dspace-8_x:

• [Port dspace-8_x] Fix navbar wrapping on medium screens #4312

[kanasznagyzoltan]

We have checked out the PR branch, when modifying the size with the devtools window, it works correctly.

DSpace.Repository.__.DSpace.-.Kozosseg.lista.-.Google.Chrome.2025-05-07.14-49-37_converted.mp4

But when I change to laptop view in the dev tools, and start changing the screen the navbar still wraps, I don’t know if this is a problem, but apart from this it works.

DSpace.Repository.__.DSpace.-.Kozosseg.lista.-.Google.Chrome.2025-05-07.14-04-54_converted.mp4