FreeTubeApp / FreeTubeApp/FreeTube
[Bug]: z-index causes UI elements to interfere with each other
- Dominant language
- Vue
- Stars
- 21.9k
- Forks
- 1.5k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 62
Description
### Guidelines
- [x] I have encountered this bug in the [latest release of FreeTube](https://github.com/FreeTubeApp/FreeTube/releases).
- [x] I have encountered this bug in the [official downloads of FreeTube](https://github.com/FreeTubeApp/FreeTube#official-downloads).
- [x] I have [searched the issue tracker for open and closed issues](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+sort%3Arelevance-desc) that are similar to the bug report I want to file, without success.
- [x] I have searched the [documentation](https://docs.freetubeapp.io/) 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](https://docs.freetubeapp.io/community/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](https://docs.freetubeapp.io/development/nightly-builds).
Contributor guide
Assessment
This issue has not been assessed yet.