From b4ee4f23f9f9b713bd3651f5e2ee735e4dce647b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 14 Feb 2024 11:59:22 +0800
Subject: [PATCH] fix skeleton vertical position

---
 src/components/ReportHeaderSkeletonView.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 5332e0c5032c..109904e5b589 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -5,7 +5,6 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -22,9 +21,12 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const smallScreenHeight = styles.appContentHeader.height;
+    const height = !isSmallScreenWidth ? styles.headerBarDesktopHeight.height : smallScreenHeight;
+    const heightDiff = height - smallScreenHeight;
 
     return (
-        <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2]}>
+        <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2, styles.h100]}>
             <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
                 {isSmallScreenWidth && (
                     <PressableWithFeedback
@@ -42,24 +44,24 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
                 <SkeletonViewContentLoader
                     animate={shouldAnimate}
                     width={styles.w100.width}
-                    height={variables.contentHeaderHeight}
+                    height={height}
                     backgroundColor={theme.highlightBG}
                     foregroundColor={theme.border}
                 >
                     <Circle
                         cx="20"
-                        cy="40"
+                        cy={height / 2}
                         r="20"
                     />
                     <Rect
                         x="55"
-                        y="28"
+                        y={24 + heightDiff / 2}
                         width="30%"
                         height="8"
                     />
                     <Rect
                         x="55"
-                        y="48"
+                        y={44 + heightDiff / 2}
                         width="40%"
                         height="8"
                     />