FreeTubeApp / FreeTubeApp/FreeTube

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

Open
#8,093 2 comments 0 reactions 0 assignees View on GitHub
B: visual
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

Image

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

Image

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

Image

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.