HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

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