Testathon: Management sidebar cuts off first letter in Firefox

[librariankimberly]

Firefox browser. When logging in as admin, the Management sidebar cuts off the first letter of the panel, whether or not the sidebar is pinned. When logging in as another persona, the Management sidebar displays properly, Screen recording is here: https://arizona.zoom.us/rec/share/DIXxStywY98TQbUmhJqoEWTVaL368rBVEy5PrSD8ijIJxkNTG_bC_KEhEgY3FLIx.me87iPI7Qbtvd8zJ?startTime=1712958202000

To Reproduce
Steps to reproduce the behavior:

1. Use Firefox
2. Login in the [email protected] persona.
3. Expand the sidebar, pin the sidebar.
4. The first letter of the first word is cut off, whether or not the sidebar is pinned.
5. This does not happen when logged in with other personas.
6. Maximizing the window didn't make a difference.

Expected behavior
I expected the sidebar to display fully without the first letter of the first word being cut off.

Related work
Link to any related tickets or PRs here.

[tdonohue]

@librariankimberly : Could you verify what version of Firefox you are using? (Go to "Help -> About Firefox")

I've tried this on the https://sandbox.dspace.org using Firefox v124.0.1 (64-bit) on Windows 11 and the menu appears correctly for me. So, I'm wondering if this is an issue with an older version of Firefox?

Here's the menu that I see in Firefox:

I'd also recommend trying the following to refresh any cached CSS that might be in your Firefox browser (because cached CSS styles can sometimes cause odd behavior and we did change the CSS styles of this sidebar recently):

• Login as an Admin in Firefox.
• Do a hard reload by trying one of the following (both of these should work the same):
  • Hold down Shift+click the Reload button in browser
  • Or, Press Ctrl+Shift+R
• See if that fixes the sidebar menu styles.. If you had cached CSS, then you may see them update and display properly
• If this fixes the styles, try a logout & login again. See if you can reproduce the display bug anymore or not.

[librariankimberly]

I'm on 124.0.2 (64-bit) as well; however, I'm on Windows 10 Enterprise and don't have control over that.

I'll try the refresh later today and let you know what happens.

[alexandrevryghem]

It looks more like an issue with the scrollbar, in PR #2656 the sidebar was moved to the sidebar-top-level-items-container section instead of over the whole sidebar component so I think that that's the most likely cause of this bug. Because Windows has larger scrollbars this is simply more visible there

[librariankimberly]

FYI, I have the same issue with Firefox on my iMac. The only first-letters-cutoff happening is with the [email protected] login. The other logins are fine.

My iMac is running macOS Catalina Version 10.15.7 (the iMac is from 2013 and the newer OS won't run on it) with Firefox 125.01.

I just think it's weird that the issue is just happening with one login....

My Windows PC has now been updated to Firefox 125. I did the hard reload to no effect. I don't use Firefox logged in or synced across devices.

Uploading the pic from my iMac using Firefox for what it's worth (I had never been to the sandbox on Firefox on the iMac since I primarily use Safari on the iMac and use Firefox for one site only.)

Anyway it is just weird but I'm moving on from the issue.

[tdonohue]

@davide-negretti : I wanted to alert you to this issue as it seems like it might have been caused by your PR #2656? I have to admit, I've had difficulty reproducing this behavior on Firefox on Windows 11, but it sounds like it's been consistent for @librariankimberly . Could you, or one of your colleagues try to test this on your end and see if there are improvements we can make to ensure the sidebar text appears properly on all browsers?

[davide-negretti]

@tdonohue @librariankimberly I confirm that the issue is caused by my PR. I assumed that the scrollbar is 8px wide (--ds-dark-scrollbar-width) and when it is not the sidebar does not work as expected.
The issue shoukd be fixed by making the dark-scrollbar() mixin work on all browsers. If this is not possible I can search for some workaround.

[tdonohue]

@davide-negretti : Thanks for confirming. In that case, I'll assign this ticket to you to resolve. Once you have a PR ready we can do some testing on that PR to verify the solution is working for all.

[davide-negretti]

@tdonohue I've found a solution that should work, but I use Linux so I won't be able to test it on Windows.

scrollbar-gutter: stable;

This would also make no longer necessary to shift menu items on the left when the scrollbar appear, but there are two issues:

(1) if the scrollbar is not visible there would be a gap on the right

• with overflow-y: scroll; (current behavior):
  
• with overflow-y: auto;:
  

(2) this is not supported by Safari, and since I cannot install it on Linux I don't know how it would behave and I cannot find a fix

The only solution I can think about is to use, on Firefox only, scrollbar-width: thin;, and slightly increase the 8px space I reserved for the toolbar.

[tdonohue]

@davide-negretti : I'd recommend creating a PR with your suggested solution. That way we can have others test it on multiple browsers and on different OSes. I'd be able to test on Windows, and I could use an iPad to test on Safari if necessary. But others may have additional environments where it could be tested.

[librariankimberly]

@davide-negretti @tdonohue I can confirm that both myself and a colleague can test on Safari using different Mac OSes. (If we're talking about testing in a sandbox.)

[davide-negretti]

@librariankimberly @tdonohue

I was able to check the demo on Windows 10 and I notice that scrollbars on Firefox behave in different ways:

• on Linux Mint 21.3 Cinnamon the scrollbar autohides itself and it overlays the content (I'd love to achieve this behavior on all browsers but the required CSS property is deprecated)
• on Windows 10 the scrollbar reduces the space available to the content, as expected (the "only" issue is that its look is not customisable)

So I decided to fix the scrollbar only for Firefox+Windows by allocating more space (20px instead of 8px).

Further steps

It is also possible to make the scrollbar narrower on Firefox+Windows only, using scrollbar-width: thin;

If anyone has the chance to test it on Windows, these are the changes required in src/app/admin/admin-sidebar/admin-sidebar.component.scss:

1. Add the folowing lines :

    div#sidebar-top-level-items-container {
      flex: 1 1 auto; // Fill available vertical space
      overflow-x: hidden;
      overflow-y: auto;
      @include dark-scrollbar;

      // ADD LINES BELOW
      ::ng-deep {
        @at-root .browser-firefox-windows & {
          scrollbar-width: thin;
        }
        // this will be applied to
        // `.browser-firefox-windows div#sidebar-top-level-items-container`
      }
      // ADD LINES ABOVE

    }

2. Measure the new width of the scrollbar, in px, then change the value of --ds-dark-scrollbar-width accordingly (either remove the following lines to use its default value of 8px or edit its value). I suggest to add 2px more to take minor variations into account.

::ng-deep {
  .browser-firefox-windows {
    --ds-dark-scrollbar-width: 20px; // EITHER REMOVE OR CHANGE
  }
}

PR: #2976

[librariankimberly]

Does this mean I should go ahead and test this now in the sandbox? From: Davide Negretti ***@***.***> Sent: Tuesday, April 23, 2024 3:21 AM To: DSpace/dspace-angular ***@***.***> Cc: Chapman, Kimberly A - (kimberlychapman) ***@***.***>; Mention ***@***.***> Subject: [EXT]Re: [DSpace/dspace-angular] Testathon: Management sidebar cuts off first letter in Firefox (Issue #2927) External Email @librariankimberly<https://github.com/librariankimberly> @tdonohue<https://github.com/tdonohue> I was able to check the demo on Windows 10 and I notice that scrollbars on Firefox behave in different ways: * on Linux Mint 21.3 Cinnamon the scrollbar autohides itself and it overlays the content (I'd love to achieve this behavior on all browsers but the required CSS property is deprecated) * on Windows 10 the scrollbar reduces the space available to the content, as expected (the "only" issue is that its look is not customisable) So I decided to fix the scrollbar only for Firefox+Windows by allocating more space (20px instead of 8px). It is also possible to make the scrollbar narrower on Firefox+Windows only using scrollbar-width: thin; If anyone has the chance to test it, these are the required changes in src/app/admin/admin-sidebar/admin-sidebar.component.scss: 1. Add the folowing lines : div#sidebar-top-level-items-container { flex: 1 1 auto; // Fill available vertical space overflow-x: hidden; overflow-y: auto; @include dark-scrollbar; // ADD LINES BELOW ::ng-deep { @at-root .browser-firefox-windows & { scrollbar-width: thin; } } // ADD LINES ABOVE } 1. Measure the new width of the scrollbar, in px, then change the value of --ds-dark-scrollbar-width accordingly (either remove the following lines to use its default value of 8px or edit its value). I suggest to add 2px more to take minor variations into account. ::ng-deep { .browser-firefox-windows {

…

--ds-dark-scrollbar-width: 20px; } } — Reply to this email directly, view it on GitHub<#2927 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKA7RKO724M7534LWM4T3JTY6YYXLAVCNFSM6AAAAABGE3KHIOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZRHE2DCNRWHE>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[tdonohue]

@librariankimberly : To help in testing the PR #2976, I have temporarily deployed it to https://sandbox.dspace.org as of a moment ago. So, if you want to try again on the Sandbox to see if @davide-negretti 's fix works for you, that'd be wonderful.

Keep in mind, some browsers will temporarily cache CSS styles. So, you may need to login as an Admin, and do a hard reload (Hold down Shift+click the Reload button in browser Or, Press Ctrl+Shift+R). That should force your browser to load the new CSS. Then, try testing the behavior.