Fix issue with the admin sidebar scrollbar on Firefox/Windows

[davide-negretti]

References

• Fixes Testathon: Management sidebar cuts off first letter in Firefox #2927

Description

This PR fixes the issues with the admin sidebar scrollbar on Firefox on Windows by allocating more space to the scrollbar.

List of changes

• In the root component a class is added to identify the browser and the OS according to the user agent (e.g. browser-firefox browser-firefox-windows
• In the admin-sidebar component the value of --ds-dark-scrollbar-width is overridden when browser-firefox-window class is present

Implementation notes

Note that --ds-dark-scrollbar-width has two purposes:

• define the scrollbar width (this is not supported by Firefox)
• allocate space to the scrollbar (min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));)

Additional notes

This PR allows to override any property of a CSS class as follows:

.my-class {
  // class properties
  ::ng-deep {
    @at-root .browser-safari & {
      // override properties here
    }
  }
}

Currently only Safari and Firefox browsers and Windows OS are supported, but other browsers and OSs can be easily added.

Further improvements

This PR solves the issue, but further improvements are required to make the scrollbar width smaller: see this comment

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

• 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 yarn lint
• My PR doesn't introduce circular dependencies (verified via yarn 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.
• 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.

[tdonohue]

👍 Thanks @davide-negretti ! I've tested this and found no issues. So, I believe this to be a fix for Firefox on Windows. If we find further issues we can deal with them in future PRs.

[tdonohue]

@davide-negretti : After merging this PR, I'm now noticing that I can get an error on this line when run via SSR:

ERROR TypeError: Cannot read properties of undefined (reading 'userAgent')
    at RootComponent2.getBrowserName (C:\\dspace-angular\dist\server\main.js:1:1008203)
    at RootComponent2.ngOnInit (C:\\dspace-angular\dist\server\main.js:1:1006659)
    at callHookInternal (C:\\dspace-angular\dist\server\main.js:1:4134206)

To reproduce:

1. Build in prod mode : yarn build:prod; yarn serve:ssr
2. Access the homepage & that SSR error will appear in the console window where you ran yarn serve:ssr.

Could you possibly provide a quick fix so that I don't have to revert this PR?