graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 10:33:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix: Thread line misalignment on smaller viewports (#307)

Browse source
This commit is contained in:
Volpeon 2024-01-03 20:38:40 +01:00
parent bf5e62301a
commit bafb197b62
No known key found for this signature in database
1 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/frontend/src/components/SkNote.vue
View file

@ -1161,24 +1161,24 @@ defineExpose({
@container (max-width: 580px) { @container (max-width: 580px) {
.root { .root {
font-size: 0.95em; font-size: 0.95em;
--avatar: 46px;
} }
.renote { .renote {
padding: 24px 28px 16px; padding: 24px 26px 0 calc(26px + var(--avatar) + 14px);
&::before {
left: calc(26px + .5 * var(--avatar));
}
} }
.collapsedRenoteTarget { .collapsedRenoteTarget {
padding: 8px 28px 24px; padding: 8px 26px 24px;
} }
.article { .article {
padding: 24px 26px; padding: 24px 26px;
} }
.avatar {
width: 50px;
height: 50px;
}
} }
@container (max-width: 500px) { @container (max-width: 500px) {
@ -1195,9 +1195,23 @@ defineExpose({
} }
} }
@container (max-width: 500px) {
.renote {
padding: 23px 25px 0 calc(25px + var(--avatar) + 14px);
&::before {
left: calc(25px + .5 * var(--avatar));
}
}
}
@container (max-width: 480px) { @container (max-width: 480px) {
.renote { .renote {
padding: 20px 24px 8px; padding: 22px 24px 0 calc(24px + var(--avatar) + 14px);
&::before {
left: calc(24px + .5 * var(--avatar));
}
} }
.tip { .tip {
@ -1215,10 +1229,12 @@ defineExpose({
} }
@container (max-width: 450px) { @container (max-width: 450px) {
.root {
--avatar: 44px;
}
.avatar { .avatar {
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 46px;
height: 46px;
top: calc(14px + var(--stickyTop, 0px)); top: calc(14px + var(--stickyTop, 0px));
} }
} }
@ -1251,11 +1267,6 @@ defineExpose({
} }
@container (max-width: 300px) { @container (max-width: 300px) {
.avatar {
width: 44px;
height: 44px;
}
.root:not(.showActionsOnlyHover) { .root:not(.showActionsOnlyHover) {
.footerButton { .footerButton {
&:not(:last-child) { &:not(:last-child) {