loading up the forgejo repo on tangled to test page performance
1.issue-list-toolbar {
2 display: flex;
3 flex-wrap: wrap-reverse;
4 justify-content: space-between;
5 align-items: center;
6 gap: 1rem;
7 margin-top: 1rem;
8}
9
10.issue-list-toolbar-left {
11 display: flex;
12 align-items: center;
13}
14
15.issue-list-toolbar-right .filter.menu {
16 flex-direction: row;
17 flex-wrap: wrap;
18}
19
20.issue-list-new.button {
21 margin-right: 0;
22}
23
24.list-header-issues {
25 min-height: var(--repo-header-issue-min-height);
26}
27
28@media (max-width: 767.98px) {
29 .issue-list-navbar {
30 order: 0;
31 }
32 .issue-list-new {
33 order: 1;
34 margin-left: auto !important;
35 }
36 .issue-list-search {
37 order: 2 !important;
38 }
39 /* Don't use flex wrap on mobile as it takes too much vertical space.
40 * Only set overflow properties on mobile screens, because while the
41 * CSS trick to pop out from overflowing works on desktop screen, it
42 * has a massive flaw that it cannot inherited any max width from it's 'real'
43 * parent and therefor ends up taking more vertical space than is desired.
44 **/
45 .issue-list-toolbar-right .filter.menu {
46 flex-wrap: nowrap;
47 overflow-x: auto;
48 overflow-y: hidden;
49 }
50
51 /* The following few CSS was created with care and built with the information
52 * from CSS-Tricks: https://css-tricks.com/popping-hidden-overflow/
53 */
54
55 /* It's important that every element up to .issue-list-toolbar-right doesn't
56 * have a position set, such that element that wants to pop out will use
57 * .issue-list-toolbar-right as 'clip parent' and thereby avoids the
58 * overflow-y: hidden.
59 */
60 .issue-list-toolbar-right .filter.menu > .dropdown.item {
61 position: initial;
62 }
63 /* It's important that this element and not an child has `position` set.
64 * Set width so that overflow-x knows where to stop overflowing.
65 */
66 .issue-list-toolbar-right {
67 position: relative;
68 width: 100%;
69 }
70}
71
72#issue-list .flex-item-body .branches {
73 display: inline-flex;
74}
75
76#issue-list .flex-item-body .branches .branch {
77 background-color: var(--color-secondary-alpha-50);
78 border-radius: var(--border-radius);
79 padding: 0 4px;
80}
81
82#issue-list .flex-item-body .branches .truncated-name {
83 white-space: nowrap;
84 overflow: hidden;
85 text-overflow: ellipsis;
86 max-width: 200px;
87 display: inline-block;
88 vertical-align: top;
89}
90
91#issue-list .flex-item-body .checklist progress {
92 margin-left: 2px;
93 width: 80px;
94 height: 6px;
95 display: inline-block;
96}
97
98#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
99 background-color: var(--color-secondary-dark-4);
100}
101
102#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
103 background-color: var(--color-secondary-dark-4);
104}
105
106.archived-label-filter {
107 margin-left: 10px;
108 font-size: 12px;
109 display: flex !important;
110 margin-bottom: 8px;
111 min-width: fit-content;
112}