mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-10-31 14:31:02 +00:00
ec6a5428a7- 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'. - Resolves my internal frustration with the mobile UI constantly getting broken. (cherry picked from commit879f842bed) (cherry picked from commit6099c9b41b) (cherry picked from commit0749d00b16)
93 lines
2.4 KiB
CSS
93 lines
2.4 KiB
CSS
.issue-list-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap-reverse;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.issue-list-toolbar-left {
|
|
display: flex;
|
|
}
|
|
|
|
.issue-list-toolbar-right .filter.menu {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.issue-list-navbar {
|
|
order: 0;
|
|
}
|
|
.issue-list-new {
|
|
order: 1;
|
|
margin-left: auto !important;
|
|
}
|
|
.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-body .branches {
|
|
display: inline-flex;
|
|
}
|
|
|
|
#issue-list .flex-item-body .branches .branch {
|
|
background-color: var(--color-secondary-alpha-40);
|
|
border-radius: var(--border-radius);
|
|
padding: 0 4px;
|
|
}
|
|
|
|
#issue-list .flex-item-body .branches .truncated-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 10em;
|
|
}
|
|
|
|
#issue-list .flex-item-body .checklist progress {
|
|
margin-left: 2px;
|
|
width: 80px;
|
|
height: 6px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
|
|
background-color: var(--color-secondary-dark-4);
|
|
}
|
|
|
|
#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
|
|
background-color: var(--color-secondary-dark-4);
|
|
}
|