From 11b932c30e586d67e0fdd7e5ee90771d6c174ffc Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 30 Apr 2024 18:43:38 +0300
Subject: [PATCH] Fixed scrolling to comments

---
 .../Article/Comment/Comment.module.scss       |  4 +++
 .../CommentDate/CommentDate.module.scss       |  5 +---
 src/components/Article/FullArticle.tsx        | 28 +++++++++----------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/Article/Comment/Comment.module.scss b/src/components/Article/Comment/Comment.module.scss
index 50170022..0191442c 100644
--- a/src/components/Article/Comment/Comment.module.scss
+++ b/src/components/Article/Comment/Comment.module.scss
@@ -179,6 +179,10 @@
   @include font-size(1.2rem);
 }
 
+.commentAuthor {
+  margin-right: 2rem;
+}
+
 .articleAuthor {
   @include font-size(1.2rem);
 
diff --git a/src/components/Article/CommentDate/CommentDate.module.scss b/src/components/Article/CommentDate/CommentDate.module.scss
index 50cf7d57..c648cca1 100644
--- a/src/components/Article/CommentDate/CommentDate.module.scss
+++ b/src/components/Article/CommentDate/CommentDate.module.scss
@@ -3,14 +3,11 @@
 
   color: var(--secondary-color);
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+  justify-content: center;
   flex-direction: column;
-  gap: .5rem;
   flex: 1;
   flex-wrap: wrap;
   font-size: 1.2rem;
-  margin-bottom: .5rem;
 
   .date {
     font-weight: 500;
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index bc7fd403..25001f38 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -60,7 +60,7 @@ export type ArticlePageSearchParams = {
 const scrollTo = (el: HTMLElement) => {
   const { top } = el.getBoundingClientRect()
   window.scrollTo({
-    top: top - DEFAULT_HEADER_OFFSET,
+    top: top + window.scrollY - DEFAULT_HEADER_OFFSET,
     left: 0,
     behavior: 'smooth',
   })
@@ -152,19 +152,6 @@ export const FullArticle = (props: Props) => {
     current: HTMLDivElement
   } = { current: null }
 
-  createEffect(() => {
-    if (props.scrollToComments) {
-      scrollTo(commentsRef.current)
-    }
-  })
-
-  createEffect(() => {
-    if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
-      requestAnimationFrame(() => scrollTo(commentsRef.current))
-      changeSearchParams({ scrollTo: null })
-    }
-  })
-
   createEffect(() => {
     if (searchParams().commentId && isReactionsLoaded()) {
       const commentElement = document.querySelector<HTMLElement>(
@@ -320,6 +307,19 @@ export const FullArticle = (props: Props) => {
     window?.addEventListener('resize', updateIframeSizes)
 
     onCleanup(() => window.removeEventListener('resize', updateIframeSizes))
+
+    createEffect(() => {
+      if (props.scrollToComments) {
+        scrollTo(commentsRef.current)
+      }
+    })
+
+    createEffect(() => {
+      if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
+        requestAnimationFrame(() => scrollTo(commentsRef.current))
+        changeSearchParams({ scrollTo: null })
+      }
+    })
   })
 
   const cover = props.article.cover ?? 'production/image/logo_image.png'