Admin sidebar icons hide part of the label text

[tinsch]

Describe the bug

The admin sidebar icons partially hide the accompanying label. Can be observed on the DSpace sandbox page and is also locally reproducible on current main.

To Reproduce

Steps to reproduce the behavior:

1. Login as an admin user and observe the sidebar

Expected behavior

The label text should be completely readable.

[tdonohue]

@tinsch : Could you add details about what browser & OS you are using? I cannot reproduce this behavior on https://sandbox.dspace.org in Chrome or Firefox (on Windows). Therefore, I suspect this is potentially a browser-specific bug.

Here's how it looks for me on Chrome:

[tinsch]

I saw it on Firefox on MacOS, on an external screen. Can't reproduce it now though, weird. I will close this ticket for now and reopen it once I see it again.

[tinsch]

I encountered this issue again with my office computer setup. I use a Mac with an external screen (Thinkvision t24m-29, 1920x1080 resolution), and the problem occurs in Firefox, but not in Chrome. Adding a padding-left: var(--ds-admin-sidebar-item-padding); to the sidebar-item fixed the issue, but I would encourage other people first to try out if they can reproduce the bug before I open a PR.

[bram-maegerman]

@tinsch I can reproduce this issue on MacOS in Firefox:

I quickly tested your solution, and would not recommend this approach. Since this also enlarges the gap on other browsers:
Firefox:

Chrome:

sandbox.dspace.org on Chrome:

The underlying issue seems to be that Firefox handles the scrollbar width differently than other browsers. There already seems to be a solution implemented for windows here: https://github.com/DSpace/dspace-angular/blob/main/src/app/admin/admin-sidebar/admin-sidebar.component.scss#L143
So something similar might be needed for macOS.

[tinsch]

@bram-maegerman thanks for testing and validating the issue. If you provide a fix I can review and test it!

[bram-maegerman]

@tinsch I provided a fix for this issue in #6118.