fix(sidebar): make left sidebar scrollbar visible on hover and keep "administration" & "settings" sticky at the bottom

[Lucifergene]

Fixes RHDHBUGS-262

Tab-8-1-2025_22_19.mp4

[its-mitesh-kumar]

/retest-required

[Lucifergene]

/retest

[Lucifergene]

/retest-required

[its-mitesh-kumar]

I think as soon as user hover on sidebar scrollbar should be visible. But currently only when user start scrolling then only scrollbar is visible. @ShiranHi @Lucifergene WDYT ?

Scroll.mov

[Lucifergene]

Yeah, makes sense. Thanks @its-mitesh-kumar :)

[ShiranHi]

I think as soon as user hover on sidebar scrollbar should be visible. But currently only when user start scrolling then only scrollbar is visible. @ShiranHi @Lucifergene WDYT ?

I agree, the scrollbar should be visible on hover. Thank you.

[Lucifergene]

@its-mitesh-kumar Tried the various edge cases to reproduce the issue:

Added dummy items in:

• Global nav items
• new sidebar group
• nested items

But I was unable to reproduce it in every situation.

As per your video, I have also tried disabling the Global Header.

Tab-8-31-2025_13_48.mp4

Can u share some more information on the reproduction steps?

[its-mitesh-kumar]

@Lucifergene I tested it again I can see the same issue adding the screen recording for the same.

Screen.Recording.2025-09-03.at.8.53.51.AM.mov

I just did add below configuration.

  frontend:
    default.main-menu-items: # key for configuring static main menu items
      menuItems:
        default.my-plugin:  
          priority: 10  
          parent: favorites  
          title: My Plugin
        default.favorites:  
          icon: favorite  
          title: Favorites   
          priority: 100  
        default.my-custom-item: # Must use 'default.' prefix
          title: My Custom Page
          icon: star
          to: "/my-custom-page"
          priority: 85
        default.my-menu-group: # Parent menu group
          title: My Tools
          icon: folder
          priority: 75
        default.nested-item: # Child menu item
          title: Nested Tool
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item9: # Child menu item
          title: Nested Tool2
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item8: # Child menu item
          title: Nested Tool3
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item7: # Child menu item
          title: Nested Tool4
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10


        default.nested-item6: # Child menu item
          title: Nested Tool1
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item5: # Child menu item
          title: Nested Tool5
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item4: # Child menu item
          title: Nested Tool6
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item3: # Child menu item
          title: Nested Tool7
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item2: # Child menu item
          title: Nested Tool8
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10
        default.nested-item1: # Child menu item
          title: Nested Tool9
          icon: extension
          to: /nested-tool
          # parent: my-menu-group
          priority: 10

[Lucifergene]

@its-mitesh-kumar I configured the nav items as you suggested, but it's still not reproducible.

Tab-9-3-2025_09_32.mp4

[HusneShabbir]

@Lucifergene I tested it locally and observed the same behavior. The side scrollbar only becomes visible when scrolling, but it's not shown initially. I've attached a recording for your reference.

Screen.Recording.2025-09-03.at.4.40.19.PM.mov

[Lucifergene]

The issue has been identified.
Its dependant on the scrollbar settings in Mac.

Doing further tests on this.

[Lucifergene]

@its-mitesh-kumar Updated the scrollbar implementation to give the same feel across all OS and browsers.
PTAL.

[HusneShabbir]

/lgtm
Tested Locally, Works as expected

[invincibleJai]

/retest

[its-mitesh-kumar]

@HusneShabbir @Lucifergene is two lines above Administration visible to you too?

On main branch with same config, I am able to see like below.

@ShiranHi does this look good to you ?

[Lucifergene]

@its-mitesh-kumar Its because you have put the nav items in the top section. So you see both the lines together.

[ShiranHi]

@ShiranHi does this look good to you ?

We don't include a borderline after the last item "Nested tool9".

[Lucifergene]

@ShiranHi I think the existence of the borderline after NestedTool 9, is not related to this fix.
We can have a different bug opened for that.

[its-mitesh-kumar]

/lgtm

[its-mitesh-kumar]

/retest-required

[Lucifergene]

/retest-required

[debsmita1]

/approve

[christoph-jerolimov]

/retest

[christoph-jerolimov]

/retest

[christoph-jerolimov]

A lot of css but I guess its time to move forward here, thanks @Lucifergene for your patience.

/lgtm
/approve

[christoph-jerolimov]

/lgtm

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-3255
• quay.io/rhdh-community/rhdh:pr-3255-c2dc6ca7

[christoph-jerolimov]

/retest

[Lucifergene]

/retest

[openshift-ci]

@Lucifergene: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-tests	569de43	link	true	/test e2e-tests

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[christoph-jerolimov]

Just rebased to pass the e2e tests.

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christoph-jerolimov, debsmita1, HusneShabbir, its-mitesh-kumar

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [christoph-jerolimov,debsmita1]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[christoph-jerolimov]

/test e2e-tests

[openshift-ci]

@christoph-jerolimov: The specified target(s) for /test were not found.
The following commands are available to trigger required jobs:

/test e2e-ocp-helm

The following commands are available to trigger optional jobs:

/test cleanup-mapt-destroy-orphaned-aks-clusters

/test cleanup-mapt-destroy-orphaned-eks-clusters

/test e2e-aks-helm-nightly

/test e2e-aks-operator-nightly

/test e2e-eks-helm-nightly

/test e2e-eks-operator-nightly

/test e2e-gke-helm-nightly

/test e2e-gke-operator-nightly

/test e2e-ocp-helm-nightly

/test e2e-ocp-helm-upgrade-nightly

/test e2e-ocp-operator-auth-providers-nightly

/test e2e-ocp-operator-nightly

/test e2e-ocp-v4-17-helm-nightly

/test e2e-ocp-v4-19-helm-nightly

/test e2e-ocp-v4-20-helm-nightly

/test e2e-osd-gcp-helm-nightly

/test e2e-osd-gcp-operator-nightly

Use /test all to run the following jobs that were automatically triggered:

pull-ci-redhat-developer-rhdh-main-e2e-ocp-helm

In response to this:

/test e2e-tests

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-3255
• quay.io/rhdh-community/rhdh:pr-3255-f8746e0b

[Lucifergene]

/test all