From 3715a6af2ec1cce5360ba3a4ecd634754264aa02 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Fri, 18 Aug 2023 15:18:23 +0200
Subject: [PATCH] [GITEA] Use vertical tabs on issue filters

- 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 commit 879f842bed999190506e1d60508e7aede1a4be21)
(cherry picked from commit 6099c9b41b9a135fb14b41304459056050abbbe2)
(cherry picked from commit 0749d00b160033de0457e17baa1e000e68810d94)
(cherry picked from commit ec6a5428a7f05d8e6d2e8a6c476b2b9d35656b0f)
(cherry picked from commit 9d0bee784d387fac026d3dcc09f10e496a99a7c5)
(cherry picked from commit 61d6ae48828cb83ca3668a28ba8ddcb7fcb471d5)
(cherry picked from commit 8b3f3639b60ac6f3de8f9fcd83ac7a48bbd659f0)
(cherry picked from commit 2c600ddb2c3e76598b9bdbd58026ab76d7590470)
(cherry picked from commit 960a9786ef62eb8664bca129e9d4fae22e98f378)
(cherry picked from commit b194354c3b489879b10774174cc91a6915b43abc)
(cherry picked from commit 4f00fa10469219c33c6ff0da8fbc788a84c36494)
(cherry picked from commit 1016f7e71a9baa9c450b70717472fafda1754f9b)
(cherry picked from commit 9a1a59a998e461d8e8c5d010356ab421764bda2c)
(cherry picked from commit 39563c5c84cc87848223ea4402c45e6257bd2172)
---
 web_src/css/repo/issue-list.css | 35 +++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
index d2f8e429f5..15ea70bbc9 100644
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -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 {