diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index e27766dc..254a32ba 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -103,6 +103,7 @@ export const Comment = (props: Props) => { return (
  • props.lastSeen })} @@ -144,7 +145,11 @@ export const Comment = (props: Props) => { diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 7559fee4..08105677 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -1,7 +1,17 @@ import { capitalize, formatDate } from '../../utils' import { Icon } from '../_shared/Icon' import { AuthorCard } from '../Author/AuthorCard' -import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js' +import { + createEffect, + createMemo, + createSignal, + For, + Match, + onCleanup, + onMount, + Show, + Switch +} from 'solid-js' import type { Author, Shout } from '../../graphql/types.gen' import MD from './MD' import { SharePopup } from './SharePopup' @@ -99,6 +109,7 @@ export const FullArticle = (props: ArticleProps) => { behavior: 'smooth' }) } + const { searchParams, changeSearchParam } = useRouter() createEffect(() => { @@ -114,6 +125,15 @@ export const FullArticle = (props: ArticleProps) => { } }) + createEffect(() => { + if (searchParams().commentId && isReactionsLoaded()) { + const commentElement = document.querySelector(`[id='comment_${searchParams().commentId}']`) + if (commentElement) { + commentElement.scrollIntoView({ behavior: 'smooth' }) + } + } + }) + const { actions: { loadReactionsBy } } = useReactions() @@ -277,15 +297,17 @@ export const FullArticle = (props: ArticleProps) => { -
    - - {(topic) => ( - - )} - -
    + +
    + + {(topic) => ( + + )} + +
    +
    1}> diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss index 1095b6d0..e974842f 100644 --- a/src/components/Author/Userpic.module.scss +++ b/src/components/Author/Userpic.module.scss @@ -24,6 +24,8 @@ background-color: white; text-align: center; line-height: 28px; + min-width: 32px; + max-width: 32px; } .anonymous { diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index a2a47713..e383b4c7 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -277,7 +277,7 @@ position: absolute; text-overflow: ellipsis; white-space: nowrap; - width: 100%; + width: calc(100% - 180px); @include media-breakpoint-down(md) { display: none; diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index 7fe0003a..6513463a 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -148,7 +148,14 @@ export const FeedView = () => { {(comment) => { return (
    -
    +
    + +