diff --git a/packages/pl-fe/src/components/scrollable-list.tsx b/packages/pl-fe/src/components/scrollable-list.tsx index 33fce3ff9..ee9a6c7b1 100644 --- a/packages/pl-fe/src/components/scrollable-list.tsx +++ b/packages/pl-fe/src/components/scrollable-list.tsx @@ -8,23 +8,7 @@ import Card from 'pl-fe/components/ui/card'; import Spinner from 'pl-fe/components/ui/spinner'; import { useSettings } from 'pl-fe/hooks/use-settings'; -// Workaround for timeline jump issue from https://github.com/TanStack/virtual/issues/659 -const measureElement = ( - element: Element, - entry: ResizeObserverEntry | undefined, - instance: Virtualizer | Virtualizer, -) => { - const direction = instance.scrollDirection; - if (direction === 'forward' || direction === null) { - return element.scrollHeight; - } else { - // don't remeasure if we are scrolling up - const indexKey = Number(element.getAttribute('data-index')); - // @ts-ignore - const cacheMeasurement = instance.itemSizeCache.get(indexKey); - return cacheMeasurement; - } -}; +const measureElement = (element: Element) => element.scrollHeight; interface IScrollableListBase { /** Pagination callback when the end of the list is reached. */ diff --git a/packages/pl-fe/src/components/sidebar-menu.tsx b/packages/pl-fe/src/components/sidebar-menu.tsx index 81d98a0ac..92ee2f73e 100644 --- a/packages/pl-fe/src/components/sidebar-menu.tsx +++ b/packages/pl-fe/src/components/sidebar-menu.tsx @@ -85,7 +85,6 @@ const SidebarLink: React.FC = React.memo(({ href, to, icon, text, ); }); - const SidebarMenu: React.FC = React.memo((): JSX.Element | null => { const intl = useIntl(); const dispatch = useAppDispatch(); diff --git a/packages/pl-fe/src/components/status-list.tsx b/packages/pl-fe/src/components/status-list.tsx index 73643fbd2..32acc34d7 100644 --- a/packages/pl-fe/src/components/status-list.tsx +++ b/packages/pl-fe/src/components/status-list.tsx @@ -131,7 +131,7 @@ const StatusList: React.FC = ({ const scrollableContent = useMemo(() => { const renderFeaturedStatuses = (): React.ReactNode[] => { if (!featuredStatusIds) return []; - + return featuredStatusIds.map(statusId => ( = ({ /> )); }; - + const renderStatuses = (): React.ReactNode[] => { if (isLoading || statusIds.length > 0) { return statusIds.reduce((acc, statusId, index) => { @@ -159,7 +159,7 @@ const StatusList: React.FC = ({ } else { acc.push(renderStatus(statusId)); } - + return acc; }, [] as React.ReactNode[]); } else { diff --git a/packages/pl-fe/src/styles/markup.scss b/packages/pl-fe/src/styles/markup.scss index 112f6d5de..4f4bbcc9b 100644 --- a/packages/pl-fe/src/styles/markup.scss +++ b/packages/pl-fe/src/styles/markup.scss @@ -4,11 +4,11 @@ h1 { @apply text-3xl font-semibold; } - + h2 { @apply text-2xl font-semibold; } - + h3 { @apply text-xl font-black; } @@ -18,7 +18,7 @@ @apply mb-4; } } - + p { @apply whitespace-pre-wrap; @@ -26,19 +26,19 @@ @apply mb-4; } } - + a { @apply text-primary-600 dark:text-accent-blue hover:underline; } - + strong { @apply font-bold; } - + em { @apply italic; } - + ul, ol { @apply pl-10; @@ -47,15 +47,15 @@ @apply mb-4; } } - + ul { @apply list-disc list-outside; } - + ol { @apply list-decimal list-outside; } - + blockquote { @apply py-1 pl-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400; @@ -63,34 +63,34 @@ @apply mb-4; } } - + table { @apply table-auto w-full bg-gray-200 dark:bg-gray-900 my-4 rounded-md; } - + table th, table td { @apply text-center px-2; } - + table th { @apply border-b-2 border-gray-600; } - + code, pre { @apply cursor-text font-mono; } - + p > code, pre { @apply bg-gray-100 dark:bg-primary-800; } - + /* Inline code */ p > code { @apply py-0.5 px-1 rounded-sm; } - + /* Code block */ pre { @apply py-2 px-3 leading-6 overflow-x-auto rounded-md break-all; @@ -99,29 +99,29 @@ @apply mb-4; } } - + pre:last-child { @apply mb-0; } - + /* Emojis */ img.emojione { @apply w-5 h-5 m-0; } - + /* Markdown inline images (Pleroma) */ img:not(.emojione) { @apply max-h-[500px] mx-auto rounded-sm; } - + &.big-emoji img.emojione { @apply inline w-9 h-9 p-1; } - + .status-link { @apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue; } - + .invisible { font-size: 0 !important; line-height: 0 !important; @@ -130,7 +130,7 @@ height: 0; position: absolute; } - + .invisible img, .invisible svg { margin: 0 !important;