MarcoBuster/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-01-02 13:46:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use vertical tabs on issue filters

Browse Source 
- This is actually https://github.com/go-gitea/gitea/pull/19978 &
https://github.com/go-gitea/gitea/pull/19486 but was removed in one of
the UI refactors of v1.20
- This is a very technical fix and is best explained in the CSS
comments. But the short version: When there's an overflow being set, but
you want an element to 'break out' of that overflow with `position:
absolute`, it sometimes doesn't work! You need to set some CSS to let
the browser know that the element needs to use an element outside of
that overflow as 'clip parent'.

(cherry picked from commit ff3ec7f612c5c1cc743862e03a59c5fadd369401)
This commit is contained in:
Gusted 2023-08-18 15:18:23 +02:00 committed by Earl Warren
parent 3081e7e153
commit 676287762b
No known key found for this signature in database
GPG Key ID: 0579CB2928A78A00
1 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web_src/css/repo/issue-list.css
View File

@ -17,10 +17,6 @@
}
@media (max-width: 767.98px) {
.issue-list-toolbar-right .dropdown .menu {
left: auto !important;
right: auto !important;
}
.issue-list-navbar {
order: 0;
}
@ -31,6 +27,37 @@
.issue-list-search {
order: 2 !important;
}
/* Don't use flex wrap on mobile as it takes too much vertical space.
* Only set overflow properties on mobile screens, because while the
* CSS trick to pop out from overflowing works on desktop screen, it
* has a massive flaw that it cannot inherited any max width from it's 'real'
* parent and therefor ends up taking more vertical space than is desired.
**/
.issue-list-toolbar-right .filter.menu {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
/* The following few CSS was created with care and built with the information
* from CSS-Tricks: https://css-tricks.com/popping-hidden-overflow/
*/
/* It's important that every element up to .issue-list-toolbar-right doesn't
* have a position set, such that element that wants to pop out will use
* .issue-list-toolbar-right as 'clip parent' and thereby avoids the
* overflow-y: hidden.
*/
.issue-list-toolbar-right .filter.menu > .dropdown.item {
position: initial;
}
/* It's important that this element and not an child has `position` set.
* Set width so that overflow-x knows where to stop overflowing.
*/
.issue-list-toolbar-right {
position: relative;
width: 100%;
}
}
#issue-list .flex-item-title .labels-list {