Better tablet layout (#7656)

* better tablet layout

* adjust left nav spacing

* add right nav to pwi

* clearer logic

* fix a couple screens that don't need the tablet layout

* fix horiz scroll bar

* fix double trending

* fix ts-ignore

* fix labeller screen

* don't offset things within dialogs

* fix load latest button (and add scale animation)

* center loader on home screen

* adjust break points

* adjust left nav spacing

* fix load latest btn (again)

* add lang select to right nav if left nav is minimal

* fix double scrollbar on tiny screens

* fix scrollbar

* fix type errors

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

@@ -1,10 +1,11 @@
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 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 {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -13,9 +14,7 @@ import {useGate} from '#/lib/statsig/statsig'
 import {colors} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
-
-const AnimatedTouchableOpacity =
-  Animated.createAnimatedComponent(TouchableOpacity)
+import {useLayoutBreakpoints} from '#/alf'
 
 export function LoadLatestBtn({
   onPress,
@@ -29,6 +28,7 @@ export function LoadLatestBtn({
   const pal = usePalette('default')
   const {hasSession} = useSession()
   const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
+  const {centerColumnOffset} = useLayoutBreakpoints()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
   const insets = useSafeAreaInsets()
 
@@ -49,33 +49,37 @@ export function LoadLatestBtn({
     : {bottom: clamp(insets.bottom, 15, 60) + 15}
 
   return (
-    <AnimatedTouchableOpacity
-      style={[
-        styles.loadLatest,
-        isDesktop &&
-          (isTallViewport
-            ? styles.loadLatestOutOfLine
-            : styles.loadLatestInline),
-        isTablet && styles.loadLatestInline,
-        pal.borderDark,
-        pal.view,
-        bottomPosition,
-        showBottomBar && fabMinimalShellTransform,
-      ]}
-      onPress={onPress}
-      hitSlop={HITSLOP_20}
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      accessibilityHint="">
-      <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
-      {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
-    </AnimatedTouchableOpacity>
+    <Animated.View style={[showBottomBar && fabMinimalShellTransform]}>
+      <PressableScale
+        style={[
+          styles.loadLatest,
+          isDesktop &&
+            (isTallViewport
+              ? styles.loadLatestOutOfLine
+              : styles.loadLatestInline),
+          isTablet &&
+            (centerColumnOffset
+              ? styles.loadLatestInlineOffset
+              : styles.loadLatestInline),
+          pal.borderDark,
+          pal.view,
+          bottomPosition,
+        ]}
+        onPress={onPress}
+        hitSlop={HITSLOP_20}
+        accessibilityLabel={label}
+        accessibilityHint=""
+        targetScale={0.9}>
+        <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
+        {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
+      </PressableScale>
+    </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
   loadLatest: {
-    // @ts-ignore 'fixed' is web only -prf
+    zIndex: 20,
     position: isWeb ? 'fixed' : 'absolute',
     left: 18,
     borderWidth: StyleSheet.hairlineWidth,
@@ -87,11 +91,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   loadLatestInline: {
-    // @ts-ignore web only
+    // @ts-expect-error web only
     left: 'calc(50vw - 282px)',
   },
+  loadLatestInlineOffset: {
+    // @ts-expect-error web only
+    left: 'calc(50vw - 432px)',
+  },
   loadLatestOutOfLine: {
-    // @ts-ignore web only
+    // @ts-expect-error web only
     left: 'calc(50vw - 382px)',
   },
   indicator: {