fix empty list in safari bug

net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js

@@ -21,10 +21,10 @@ export const ImageAssetWrapper = styled.div`
   }
 
   .expand {
-    padding-right: 2px;
+    padding-left: 4px;
     position: absolute;
     bottom: 0;
-    right: 0;
+    left: 0;
   }
 `;
 

net/web/src/User/Conversation/TopicItem/TopicItem.styled.js

@@ -5,7 +5,6 @@ export const TopicItemWrapper = styled.div`
   flex-direction: row;
   width: 100%;
   padding-left: 8px;
-  padding-right: 8px;
   
   .avatar {
     height: 32px;
@@ -43,6 +42,7 @@ export const TopicItemWrapper = styled.div`
 
     .message {
       padding-top: 6px;
+      padding-right: 16px;
     }
   }
 `;

net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.styled.js

@@ -39,11 +39,11 @@ export const VideoAssetWrapper = styled.div`
   }
 
   .expand {
-    padding-right: 2px;
+    padding-left: 4px;
     visibility: hidden;
     position: absolute;
     bottom: 0;
-    right: 0;
+    left: 0;
   }
 `;
 

net/web/src/VirtualList/VirtualList.jsx

@@ -11,12 +11,12 @@ export function VirtualList({ id, items, itemRenderer }) {
   const DEFAULT_LIST_HEIGHT = 4096;
   const GUTTER = 6;
 
-  const [ viewHeight, setViewHeight ] = useState(DEFAULT_LIST_HEIGHT); 
   const [ canvasHeight, setCanvasHeight ] = useState(DEFAULT_LIST_HEIGHT*3);
   const [ slots, setSlots ] = useState(new Map());
   const [ scroll, setScroll ] = useState('hidden');
 
   let update = useRef(0);
+  let viewHeight = useRef(DEFAULT_LIST_HEIGHT);
   let latch = useRef(true);
   let scrollTop = useRef(0);
   let containers = useRef([]);
@@ -49,11 +49,8 @@ export function VirtualList({ id, items, itemRenderer }) {
   }
 
   useEffect(() => {
-    if (viewHeight * 3 > canvasHeight) {
-      growCanvasHeight(viewHeight * 3);
-    }
     updateCanvas();
-  }, [viewHeight]);
+  }, [canvasHeight]);
 
   useEffect(() => {
     if (key.current != id) {
@@ -65,10 +62,6 @@ export function VirtualList({ id, items, itemRenderer }) {
     setItems();
   }, [items, id]);
 
-  useEffect(() => {
-    updateCanvas();
-  }, [viewHeight, canvasHeight]);
-
   const onScrollWheel = (e) => {
     if (e.deltaY < 0 && latch.current) {
       latch.current = false;
@@ -96,15 +89,15 @@ export function VirtualList({ id, items, itemRenderer }) {
     let view = getPlacement();
     if (view && containers.current[containers.current.length - 1].index == items.length - 1) {
       if (view?.overscan?.bottom <= 0) {
-        if (view.position.height < viewHeight) {
+        if (view.position.height < viewHeight.current) {
           if (scrollTop.current != view.position.top) {
             scrollTop.current = view.position.top;
             listRef.current.scrollTo({ top: scrollTop.current, left: 0 });
           }
         }
         else {
-          if (scrollTop.current != view.position.bottom - viewHeight) {
+          if (scrollTop.current != view.position.bottom - viewHeight.current) {
-            scrollTop.current = view.position.bottom - viewHeight;
+            scrollTop.current = view.position.bottom - viewHeight.current;
             listRef.current.scrollTo({ top: scrollTop.current, left: 0 });
           }
         }
@@ -162,7 +155,7 @@ export function VirtualList({ id, items, itemRenderer }) {
       containers.current.shift();
     }
     while (containers.current.length > 0 &&
-        containers.current[containers.current.length - 1].top > scrollTop.current + viewHeight + HOLDZONE) {
+        containers.current[containers.current.length - 1].top > scrollTop.current + viewHeight.current + HOLDZONE) {
       removeSlot(containers.current[containers.current.length - 1].id);
       containers.current.pop();
     }
@@ -226,15 +219,15 @@ export function VirtualList({ id, items, itemRenderer }) {
     if (latch.current) {
       let view = getPlacement();
       if (view) {
-        if (view.position.height < viewHeight) {
+        if (view.position.height < viewHeight.current) {
           if (scrollTop.current != view.position.top) {
             scrollTop.current = view.position.top;
             listRef.current.scrollTo({ top: scrollTop.current, left: 0, behavior: 'smooth' });
           }
         }
         else {
-          if (scrollTop.current != view.position.bottom - viewHeight) {
+          if (scrollTop.current != view.position.bottom - viewHeight.current) {
-            scrollTop.current = view.position.bottom - viewHeight;
+            scrollTop.current = view.position.bottom - viewHeight.current;
             listRef.current.scrollTo({ top: scrollTop.current, left: 0, behavior: 'smooth' });
           }
         }
@@ -310,7 +303,7 @@ export function VirtualList({ id, items, itemRenderer }) {
     let top = containers.current[0].top;
     let bottom = containers.current[containers.current.length-1].top + containers.current[containers.current.length-1].height + 2 * GUTTER;
     let overTop = scrollTop.current - top;
-    let overBottom = bottom - (scrollTop.current + viewHeight);
+    let overBottom = bottom - (scrollTop.current + viewHeight.current);
     return { 
       position: { top, bottom, height: bottom - top }, 
       overscan: { top: overTop, bottom: overBottom }
@@ -320,7 +313,10 @@ export function VirtualList({ id, items, itemRenderer }) {
   return (
     <ReactResizeDetector handleHeight={true}>
       {({ height }) => {
-        setViewHeight(height);
+        if (height) {
+          growCanvasHeight(height * 3);
+          viewHeight.current = height;
+        }
         return (
           <VirtualListWrapper onScroll={onScrollView} onWheel={onScrollWheel}>
             <div class="rollview" style={{ overflowY: 'auto' }} ref={listRef} onScroll={onScrollView}>