pl-fe: idk what's actually stabler lol

Signed-off-by: mkljczk <git@mkljczk.pl>

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<HTMLElement, Element> | Virtualizer<Window, Element>,
-) => {
-  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. */

packages/pl-fe/src/components/sidebar-menu.tsx

@@ -85,7 +85,6 @@ const SidebarLink: React.FC<ISidebarLink> = React.memo(({ href, to, icon, text,
   );
 });
 
-
 const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
   const intl = useIntl();
   const dispatch = useAppDispatch();

packages/pl-fe/src/components/status-list.tsx

@@ -131,7 +131,7 @@ const StatusList: React.FC<IStatusList> = ({
   const scrollableContent = useMemo(() => {
     const renderFeaturedStatuses = (): React.ReactNode[] => {
       if (!featuredStatusIds) return [];
-  
+
       return featuredStatusIds.map(statusId => (
         <StatusContainer
           key={`f-${statusId}`}
@@ -145,7 +145,7 @@ const StatusList: React.FC<IStatusList> = ({
         />
       ));
     };
-  
+
     const renderStatuses = (): React.ReactNode[] => {
       if (isLoading || statusIds.length > 0) {
         return statusIds.reduce((acc, statusId, index) => {
@@ -159,7 +159,7 @@ const StatusList: React.FC<IStatusList> = ({
           } else {
             acc.push(renderStatus(statusId));
           }
-  
+
           return acc;
         }, [] as React.ReactNode[]);
       } else {

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;