Reposition FABs

src/view/com/util/fab/FABInner.tsx

@@ -32,8 +32,13 @@ export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
   const size = gtMobile ? styles.sizeLarge : styles.sizeRegular
 
   const tabletSpacing = gtMobile
-    ? {right: 50, bottom: 50}
-    : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
+    ? {right: a.pr_xl.paddingRight, bottom: a.pb_lg.paddingBottom}
+    : {
+        right: a.pr_lg.paddingRight,
+        bottom:
+          clamp(insets.bottom, a.pb_md.paddingBottom, 60) +
+          a.pb_md.paddingBottom,
+      }
 
   return (
     <Animated.View

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -6,7 +6,6 @@ import {useMediaQuery} from 'react-responsive'
 import {HITSLOP_20} from '#/lib/constants'
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {useSession} from '#/state/session'
 import {
@@ -31,9 +30,8 @@ export function LoadLatestBtn({
   showIndicator: boolean
 }) {
   const {hasSession} = useSession()
-  const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
   const {centerColumnOffset} = useLayoutBreakpoints()
-  const {gtMobile} = useBreakpoints()
+  const {gtMobile, gtTablet} = useBreakpoints()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
   const insets = useSafeAreaInsets()
   const t = useTheme()
@@ -48,11 +46,12 @@ export function LoadLatestBtn({
 
   // Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
   // it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
-  const showBottomBar = hasSession ? isMobile : isTabletOrMobile
+  const showBottomBar = hasSession ? !gtMobile : !gtTablet
 
-  const bottomPosition = isTablet
-    ? {bottom: 50}
-    : {bottom: clamp(insets.bottom, 15, 60) + 15}
+  const bottomInset = gtMobile ? a.pb_lg.paddingBottom : a.pb_md.paddingBottom
+  const bottomPosition = gtMobile
+    ? {bottom: bottomInset}
+    : {bottom: clamp(insets.bottom, bottomInset, 60) + bottomInset}
 
   return (
     <Animated.View
@@ -61,11 +60,11 @@ export function LoadLatestBtn({
         a.fixed,
         a.z_20,
         {left: gtMobile ? a.pl_lg.paddingLeft : a.pl_md.paddingLeft},
-        isDesktop &&
+        gtTablet &&
           (isTallViewport
             ? styles.loadLatestOutOfLine
             : styles.loadLatestInline),
-        isTablet &&
+        gtMobile &&
           (centerColumnOffset
             ? styles.loadLatestInlineOffset
             : styles.loadLatestInline),
@@ -109,10 +108,10 @@ export function LoadLatestBtn({
 
 const styles = StyleSheet.create({
   loadLatestInline: {
-    left: web('calc(50vw - 282px)'),
+    left: web('calc(50vw - 292px)'),
   },
   loadLatestInlineOffset: {
-    left: web(`calc(50vw - 282px + ${CENTER_COLUMN_OFFSET}px)`),
+    left: web(`calc(50vw - 292px + ${CENTER_COLUMN_OFFSET}px)`),
   },
   loadLatestOutOfLine: {
     left: web('calc(50vw - 382px)'),