diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index dd345ae23..b0e547821 100644 --- a/src/components/right/Profile.scss +++ b/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); } diff --git a/src/components/right/hooks/useProfileState.ts b/src/components/right/hooks/useProfileState.ts index a8665d588..d368908c2 100644 --- a/src/components/right/hooks/useProfileState.ts +++ b/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]) => { diff --git a/src/components/right/hooks/useTransitionFixes.ts b/src/components/right/hooks/useTransitionFixes.ts index 26f99ea3d..b514001e4 100644 --- a/src/components/right/hooks/useTransitionFixes.ts +++ b/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, transitionElSelector = '.Transition.shared-media-transition', @@ -19,7 +16,7 @@ export default function useTransitionFixes( const transitionEl = container.querySelector(transitionElSelector); const tabsEl = container.querySelector('.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`; diff --git a/src/util/animateScroll.ts b/src/util/animateScroll.ts index a1188ceb3..73008038b 100644 --- a/src/util/animateScroll.ts +++ b/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 diff --git a/src/util/visibility/getOffsetToContainer.ts b/src/util/visibility/getOffsetToContainer.ts index cb8427291..9df849ccc 100644 --- a/src/util/visibility/getOffsetToContainer.ts +++ b/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 }; }