post/nas
1
0
Fork 0
forked from gitea/nas
Code Pull requests Activity

fix: Fix cramped layout of follower recommendations on small viewports (#34967)

Browse source
This commit is contained in:
diondiondion 2025-06-11 17:15:12 +02:00 • committed by GitHub
parent 1623d54ec0
commit 2c828748a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 266 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

114
app/javascript/styles/mastodon/components.scss
View file

@ -2133,6 +2133,16 @@ body > [data-popper-placement] {
display: flex;
gap: 10px;
align-items: center;
justify-content: end;
}
.account__wrapper--with-bio {
align-items: start;
}
.account__info-wrapper {
flex: 1 1 auto;
min-width: 0;
}
.account__avatar {
@ -2141,6 +2151,11 @@ body > [data-popper-placement] {
border-radius: var(--avatar-border-radius);
background: var(--surface-background-color);
@container (width < 360px) {
width: 35px !important;
height: 35px !important;
}
img {
width: 100%;
height: 100%;
@ -2266,7 +2281,7 @@ a .account__avatar {
}
.account__relationship,
.explore__suggestions__card {
.explore-suggestions-card {
.icon-button {
border: 1px solid var(--background-border-color);
border-radius: 4px;
@ -3217,7 +3232,7 @@ a.account__display-name {
}
}
.explore__suggestions__card {
.explore-suggestions-card {
padding: 12px 16px;
gap: 8px;
display: flex;
@ -3229,60 +3244,77 @@ a.account__display-name {
}
&__source {
padding-inline-start: 60px;
font-size: 13px;
line-height: 16px;
color: $dark-text-color;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@container (width >= 400px) {
padding-inline-start: 60px;
}
}
&__body {
display: flex;
gap: 12px;
align-items: center;
justify-content: end;
}
&__main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
&__avatar {
flex-shrink: 0;
&__name-button {
display: flex;
align-items: center;
gap: 8px;
@container (width < 360px) {
width: 35px !important;
height: 35px !important;
}
}
&__name {
display: block;
color: inherit;
text-decoration: none;
flex: 1 1 auto;
min-width: 0;
}
&__link {
flex: 1 1 auto;
display: flex;
gap: 12px;
align-items: center;
text-decoration: none;
min-width: 0;
.button {
min-width: 80px;
}
.display-name {
font-size: 15px;
line-height: 20px;
color: $secondary-text-color;
strong {
font-weight: 700;
}
&__account {
color: $darker-text-color;
display: block;
}
}
&:hover,
&:focus-visible {
.display-name__html {
text-decoration: underline;
}
}
.display-name {
font-size: 15px;
line-height: 20px;
color: $secondary-text-color;
strong {
font-weight: 700;
}
&__account {
color: $darker-text-color;
display: block;
}
}
}
&__actions {
display: flex;
align-items: center;
gap: 8px;
justify-content: end;
.button {
min-width: 80px;
}
}
&__dismiss-button {
@container (width < 400px) {
display: none;
}
}
}