mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2025-01-19 16:22:49 +09:00
Code

Fixed hashtag header overflowing in mobile layout

Browse Source
This commit is contained in:
Niléane 2023-12-01 16:23:14 +01:00
parent e4ff7d4246
commit 3bced8fa64
No known key found for this signature in database
3 changed files with 60 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
TangerineUI-cherry.css
View File

@ -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);

25
TangerineUI-purple.css
View File

@ -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);

25
TangerineUI.css
View File

@ -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);