[Bug]: z-index causes UI elements to interfere with each other

[efb4f5ff-1298-471a-8973-3d47447115dc]

Guidelines

• [x] I have encountered this bug in the latest release of FreeTube.
• [x] I have encountered this bug in the official downloads of FreeTube.
• [x] I have searched the issue tracker for open and closed issues that are similar to the bug report I want to file, without success.
• [x] I have searched the documentation for information that matches the description of the bug I want to file, without success.
• [x] This issue contains only one bug.
• [x] I have read and agree to follow the rules.

Describe the bug

Case A:

1. Go to Settings -> General
2. Open Preferred API Backend dropdown
3. Hover over the tooltip
4. See that dropdown obstructs tooltip

Case B:

1. Resize screen to mobile format
2. Navigate to General Settings
3. Make sure IV API is set as primary or fallback
4. Remove some characters from the Current Invidious Instance to make the suggestions appear. Long list would be preferred.
5. Scroll up/down and see that top/bottom bar and suggestions do not get along nicely

https://github.com/user-attachments/assets/88df9c50-59b9-468c-b0e0-7486421d5511

Case C:

1. Resize screen to mobile format
2. Open Kebab menu
3. Scroll up/down
4. Menu overlaps on bottom bar

Case D:

1. Resize screen to mobile format
2. Go to General Settings
3. Enable API fallback
4. Remove a bit of the instance URL so that a few suggestions show up
5. Click on the More button on the bottom bar
6. Click on the instance field
7. See that More menu options are behind the instance suggestions

Expected Behavior

• A: Correct the z-index so that the tooltip message is above the options from the dropdown
• B: Bottom bar en IV instance suggestions does not interfere with eachother
• C: Expanded kebab menu should be behind the bottom bar
• D: More menu options should not be behind the instance suggestions

Issue Labels

visual bug

FreeTube Version

https://github.com/FreeTubeApp/FreeTube/commit/2282b33d980f062cf667a1949c57eeaec8ab9d6d

Operating System Version

Windows 11 IoT Enterprise LTSC 24H2

Installation Method

.exe

Primary API used

Local API

Last Known Working FreeTube Version (If Any)

No response

Additional Information

https://github.com/orgs/FreeTubeApp/projects/4?pane=issue&itemId=68600861

Nightly Build

• [x] I have encountered this bug in the latest nightly build.

[ozrendev]

Looks like cases B,C,D can be resolved by setting .sideNav to a z-index of 11 or higher.

I couldn't replicate Case A with the latest build, the tooltip would not show if the select element was opened. I'm on Linux, so could this be an electron issue?

Sort of related (I think) the select element also overlays the bottom bar when in mobile format. Also the selected text is black instead of the usual contrasting white text.

[efb4f5ff-1298-471a-8973-3d47447115dc]

I couldn't replicate Case A with the latest build, the tooltip would not show if the select element was opened. I'm on Linux, so could this be an electron issue?

@ozrendev Clip of case A

https://github.com/user-attachments/assets/92ef83ee-166a-4c54-a0b9-cc76b75b1800

Sort of related (I think) the select element also overlays the bottom bar when in mobile format. Also the selected text is black instead of the usual contrasting white text.

Good catches!

[github-actions[bot]]

This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.