Fix jumpy scroll

app/package.json

@@ -4,11 +4,11 @@
   "description": "A desktop environment for Urbit",
   "private": "true",
   "scripts": {
-    "prebuild": "electron-rebuild -f -w better-sqlite3",
+    "prebuild": "./node_modules/.bin/electron-rebuild -f -w better-sqlite3",
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
     "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.holium/configs/webpack.config.main.prod.ts",
     "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.holium/configs/webpack.config.renderer.prod.ts",
-    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
+    "rebuild": "./node_modules/.bin/electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "package:prerelease:linux": "ts-node ./.holium/scripts/clean.js dist && npm run build && electron-builder build --linux --publish never",
     "package:prerelease:mac": "ts-node ./.holium/scripts/clean.js dist && npm run build && yarn rebuild && electron-builder build --mac --publish never",
     "package:prerelease:win": "ts-node ./.holium/scripts/clean.js dist && npm run build && electron-builder build --win --publish never",

app/src/renderer/apps/Courier/views/ChatLog.tsx

@@ -232,8 +232,8 @@ export const ChatLogPresenter = ({ storage }: ChatLogProps) => {
                   return (
                     <Box
                       mx="1px"
-                      pt={topSpacing}
-                      pb={isLast ? bottomSpacing : 0}
+                      pb={topSpacing}
+                      pt={isLast ? bottomSpacing : 0}
                     >
                       {showDate && (
                         <Text.Custom

lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx

@@ -10,18 +10,17 @@ type ImageBlockProps = {
   onImageLoaded?: () => void;
 } & BlockProps;
 
-export const ImageBlock = (props: ImageBlockProps) => {
-  const {
-    showLoader,
-    image,
-    by,
-    variant,
-    width = 'inherit',
-    height,
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    onImageLoaded,
-    ...rest
-  } = props;
+export const ImageBlock = ({
+  id,
+  showLoader,
+  image,
+  by,
+  variant,
+  width = 'inherit',
+  height,
+  onImageLoaded,
+  ...rest
+}: ImageBlockProps) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const parsedHeight = useMemo(
     () =>
@@ -44,9 +43,8 @@ export const ImageBlock = (props: ImageBlockProps) => {
   );
 
   return (
-    <Block variant={variant} width={width} {...rest}>
+    <Block id={id} variant={variant} width={width} {...rest}>
       <FragmentImage
-        id={rest.id}
         loading="eager"
         {...(showLoader && { isSkeleton: !isLoaded })}
         src={image}
@@ -59,9 +57,7 @@ export const ImageBlock = (props: ImageBlockProps) => {
             setIsLoaded(true);
           }
         }}
-        onError={() => {
-          // setIsError(true);
-        }}
+        onError={() => {}}
       />
       {by && (
         <Flex className="block-footer">

lib/design-system/src/general/WindowedList/WindowedList.styles.tsx

@@ -1,15 +1,26 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { List } from './source/List/List';
 
-export const StyledList = styled(List)<{ hideScrollbar: boolean }>`
+export const StyledList = styled(List)<{
+  startAtBottom: boolean;
+  hideScrollbar: boolean;
+}>`
+  ${({ startAtBottom }) =>
+    startAtBottom &&
+    css`
+      :nth-child(1) {
+        transform: scaleY(-1);
+      }
+    `}
+
   ${({ hideScrollbar }) =>
     hideScrollbar &&
-    `
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+    css`
+      -ms-overflow-style: none;
+      scrollbar-width: none;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  `}
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    `}
 `;

lib/design-system/src/general/WindowedList/WindowedList.tsx

@@ -48,10 +48,10 @@ export const WindowedList = <T,>({
   sort = () => 0,
   filter = () => true,
 }: WindowedListProps<T>) => {
-  const data = useMemo(
-    () => rawData.filter(filter).sort(sort),
-    [rawData, filter, sort]
-  );
+  const data = useMemo(() => {
+    const filteredAndSorted = rawData.filter(filter).sort(sort);
+    return startAtBottom ? filteredAndSorted.reverse() : filteredAndSorted;
+  }, [rawData, filter, sort]);
   const cache = useRef(
     new CellMeasurerCache({
       fixedWidth: true,
@@ -75,7 +75,8 @@ export const WindowedList = <T,>({
             width={width ?? maybeAutoWidth}
             height={height ?? maybeAutoHeight}
             rowCount={data.length}
-            rowHeight={cache.current.rowHeight as any}
+            rowHeight={(i) => cache.current.rowHeight(i) ?? 60}
+            estimatedRowSize={60}
             deferredMeasurementCache={cache.current}
             rowRenderer={({ key, index, style, parent }) => (
               <CellMeasurer
@@ -85,7 +86,13 @@ export const WindowedList = <T,>({
                 rowIndex={index}
               >
                 {({ measure, registerChild }) => (
-                  <div style={style} ref={registerChild}>
+                  <div
+                    style={{
+                      ...style,
+                      transform: startAtBottom ? 'scaleY(-1)' : undefined,
+                    }}
+                    ref={registerChild}
+                  >
                     {rowRenderer(data[index], index, measure, data)}
                   </div>
                 )}
@@ -94,8 +101,6 @@ export const WindowedList = <T,>({
             onScroll={onScroll}
             hideScrollbar={hideScrollbar}
             startAtBottom={startAtBottom}
-            scrollToIndex={startAtBottom ? data.length - 1 : 0}
-            scrollToAlignment={startAtBottom ? 'end' : 'auto'}
           />
         )}
       </AutoSizer>

lib/design-system/src/general/WindowedList/source/Grid/Grid.tsx

@@ -978,7 +978,6 @@ export class Grid extends React.PureComponent<Props, State> {
     const childrenToDisplay = this._childrenToDisplay;
     const showNoContentRenderer =
       childrenToDisplay?.length === 0 && height > 0 && width > 0;
-    const whiteSpace = height - totalRowsHeight;
 
     return (
       <div
@@ -991,9 +990,6 @@ export class Grid extends React.PureComponent<Props, State> {
         style={{
           ...gridStyle,
           ...style,
-          ...(this.props.startAtBottom && whiteSpace > 0
-            ? { transform: `translateY(${whiteSpace}px)` }
-            : {}),
         }}
         tabIndex={tabIndex}
       >