Profile: Various fixes for auto-scroll

src/components/right/Profile.scss

@@ -7,12 +7,28 @@
   flex-direction: column;
 
   height: 100%;
-  border-top: 1px solid transparent;
 
-  transition: border-top-color 0.2s ease-in-out;
+  &::before {
+    content: "";
+
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 1px;
+
+    opacity: 0;
+    background-color: var(--color-borders);
+
+    transition: opacity 0.2s ease-in-out;
+  }
 
   &.scrolled {
-    border-top-color: var(--color-borders);
+    &::before {
+      opacity: 1;
+    }
   }
 
   > .profile-info > .ChatInfo {
@@ -47,6 +63,7 @@
 
   .FloatingActionButton {
     z-index: 1;
+
     &.revealed {
       transition-delay: 0.2s;
     }
@@ -87,11 +104,11 @@
 
 .shared-media {
   display: flex;
+  flex: 1;
   flex-direction: column-reverse;
 
   .TabList {
     z-index: 1;
-    top: -1px;
     background: var(--color-background);
   }
 

src/components/right/hooks/useProfileState.ts

@@ -45,8 +45,10 @@ export default function useProfileState(
         }, PROGRAMMATIC_SCROLL_TIMEOUT_MS);
       }
     }
-  }, [tabType, onProfileStateChange, containerRef, forceScrollProfileTab,
-    allowAutoScrollToTabs, handleStopAutoScrollToTabs]);
+  }, [
+    tabType, onProfileStateChange, containerRef, forceScrollProfileTab,
+    allowAutoScrollToTabs, handleStopAutoScrollToTabs,
+  ]);
 
   // Scroll to top
   useEffectWithPrevDeps(([prevProfileState]) => {

src/components/right/hooks/useTransitionFixes.ts

@@ -5,9 +5,6 @@ import { requestMeasure, requestMutation } from '../../../lib/fasterdom/fasterdo
 
 import useLastCallback from '../../../hooks/useLastCallback';
 
-// Sometimes px values are rounded
-const ROUNDING_COMPENSATION_PX = 1;
-
 export default function useTransitionFixes(
   containerRef: ElementRef<HTMLDivElement>,
   transitionElSelector = '.Transition.shared-media-transition',
@@ -19,7 +16,7 @@ export default function useTransitionFixes(
       const transitionEl = container.querySelector<HTMLDivElement>(transitionElSelector);
       const tabsEl = container.querySelector<HTMLDivElement>('.TabList');
       if (transitionEl && tabsEl) {
-        const newHeight = container.offsetHeight - tabsEl.offsetHeight + ROUNDING_COMPENSATION_PX;
+        const newHeight = container.clientHeight - tabsEl.offsetHeight;
 
         requestMutation(() => {
           transitionEl.style.minHeight = `${newHeight}px`;

src/util/animateScroll.ts

@@ -77,7 +77,7 @@ function createMutateFunction(args: AnimateScrollArgs) {
   }
 
   const { offsetHeight: elementHeight } = element;
-  const { scrollTop: currentScrollTop, offsetHeight: containerHeight, scrollHeight } = container;
+  const { scrollTop: currentScrollTop, clientHeight: containerHeight, scrollHeight } = container;
   const elementTop = getOffsetToContainer(element, container).top;
 
   const targetContainerHeight = forceNormalContainerHeight && container.dataset.normalHeight

src/util/visibility/getOffsetToContainer.ts

@@ -8,8 +8,11 @@ export default function getOffsetToContainer(element: HTMLElement, container: HT
     offsetTop += current.offsetTop;
     offsetLeft += current.offsetLeft;
 
-    current = current.offsetParent as HTMLElement;
+    current = current.offsetParent as HTMLElement | null;
   }
 
+  offsetTop -= container.clientTop;
+  offsetLeft -= container.clientLeft;
+
   return { top: offsetTop, left: offsetLeft };
 }