From 3bced8fa644d6309daf2fc6bea71bf6ee74295f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Fri, 1 Dec 2023 16:23:14 +0100
Subject: [PATCH] Fixed hashtag header overflowing in mobile layout

---
 TangerineUI-cherry.css | 25 ++++++++++++++++++++-----
 TangerineUI-purple.css | 25 ++++++++++++++++++++-----
 TangerineUI.css        | 25 ++++++++++++++++++++-----
 3 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 1a12243..0e4b98b 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -3014,7 +3014,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* Hashtag header */
 .app-body .hashtag-header {
     font-size: 15px;
-    padding: 22px 20px 24px;
+    padding: 24px 20px;
     color: var(--color-content-fg);
     background-color: var(--color-content-secondary-bg);
     border-top: 1px solid var(--color-lines);
@@ -3033,12 +3033,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     margin-top: -5px;
     width: max-content;
 }
-
-@media screen and (min-width:890px) and (max-width:1174px) {
-    .app-body .hashtag-header {
-        margin-top: 15px;
+@media screen and (max-width:460px) {
+    .app-body .hashtag-header .hashtag-header__header + div {
+        max-width: 55%;
+        line-height: 1.5;
+        margin-top: -2px;
+    }
+    .app-body .hashtag-header .hashtag-header__header + div > span {
+        display: inline-block;
+        margin-right: 5px;
     }
 }
+.layout-multiple-columns .hashtag-header .hashtag-header__header + div {
+    max-width: 55%;
+    line-height: 1.5;
+    margin-top: -2px;
+}
+.layout-multiple-columns .hashtag-header .hashtag-header__header + div > span {
+    display: inline-block;
+    margin-right: 5px;
+}
+
 @media screen and (min-width:890px) {
     .app-body .hashtag-header {
         border-left: 1px solid var(--color-lines);
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 9a8a198..48cea35 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -3013,7 +3013,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* Hashtag header */
 .app-body .hashtag-header {
     font-size: 15px;
-    padding: 22px 20px 24px;
+    padding: 24px 20px;
     color: var(--color-content-fg);
     background-color: var(--color-content-secondary-bg);
     border-top: 1px solid var(--color-lines);
@@ -3032,12 +3032,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     margin-top: -5px;
     width: max-content;
 }
-
-@media screen and (min-width:890px) and (max-width:1174px) {
-    .app-body .hashtag-header {
-        margin-top: 15px;
+@media screen and (max-width:460px) {
+    .app-body .hashtag-header .hashtag-header__header + div {
+        max-width: 55%;
+        line-height: 1.5;
+        margin-top: -2px;
+    }
+    .app-body .hashtag-header .hashtag-header__header + div > span {
+        display: inline-block;
+        margin-right: 5px;
     }
 }
+.layout-multiple-columns .hashtag-header .hashtag-header__header + div {
+    max-width: 55%;
+    line-height: 1.5;
+    margin-top: -2px;
+}
+.layout-multiple-columns .hashtag-header .hashtag-header__header + div > span {
+    display: inline-block;
+    margin-right: 5px;
+}
+
 @media screen and (min-width:890px) {
     .app-body .hashtag-header {
         border-left: 1px solid var(--color-lines);
diff --git a/TangerineUI.css b/TangerineUI.css
index 1cbba88..404b97b 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -3013,7 +3013,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* Hashtag header */
 .app-body .hashtag-header {
     font-size: 15px;
-    padding: 22px 20px 24px;
+    padding: 24px 20px;
     color: var(--color-content-fg);
     background-color: var(--color-content-secondary-bg);
     border-top: 1px solid var(--color-lines);
@@ -3032,12 +3032,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     margin-top: -5px;
     width: max-content;
 }
-
-@media screen and (min-width:890px) and (max-width:1174px) {
-    .app-body .hashtag-header {
-        margin-top: 15px;
+@media screen and (max-width:460px) {
+    .app-body .hashtag-header .hashtag-header__header + div {
+        max-width: 55%;
+        line-height: 1.5;
+        margin-top: -2px;
+    }
+    .app-body .hashtag-header .hashtag-header__header + div > span {
+        display: inline-block;
+        margin-right: 5px;
     }
 }
+.layout-multiple-columns .hashtag-header .hashtag-header__header + div {
+    max-width: 55%;
+    line-height: 1.5;
+    margin-top: -2px;
+}
+.layout-multiple-columns .hashtag-header .hashtag-header__header + div > span {
+    display: inline-block;
+    margin-right: 5px;
+}
+
 @media screen and (min-width:890px) {
     .app-body .hashtag-header {
         border-left: 1px solid var(--color-lines);