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;