From 7b70b6c3cdd5cbb003f8040a7a8484873ac1d45d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
<root@acid-chicken.com>
Date: Sat, 11 Feb 2023 10:36:14 +0900
Subject: [PATCH] fix: newNoteReceived indicator causes Layout Shift (#9843)
* fix: newNoteReceived indicator causes Layout Shift
* chore: tweak position
* chore: apply to user-list-timeline
* style: unitless
* chore: apply to antenna-timeline
* fix: redundant margin
---
packages/frontend/src/pages/antenna-timeline.vue | 1 +
packages/frontend/src/pages/timeline.vue | 5 +++++
packages/frontend/src/pages/user-list-timeline.vue | 1 +
3 files changed, 7 insertions(+)
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index bf3004f280..ff31c3ab2c 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -98,6 +98,7 @@ definePageMetadata(computed(() => antenna ? {
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
+ margin: calc(-0.675em - 8px - var(--margin)) 0 calc(-0.675em - 8px);
> button {
display: block;
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 057409484c..9754650844 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -177,6 +177,11 @@ definePageMetadata(computed(() => ({
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
+ margin: calc(-0.675em - 8px) 0;
+
+ &:first-child {
+ margin-top: calc(-0.675em - 8px - var(--margin));
+ }
> button {
display: block;
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index 6817d44d8c..3f47edfd44 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -91,6 +91,7 @@ definePageMetadata(computed(() => list ? {
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
+ margin: calc(-0.675em - 8px - var(--margin)) 0 calc(-0.675em - 8px);
> button {
display: block;