Fix auth flow, FAB, and and load latest button

src/view/com/auth/SplashScreen.tsx

@@ -58,7 +58,9 @@ export const SplashScreen = ({
             <Trans>What's up?</Trans>
           </Text>
         </View>
-        <View testID="signinOrCreateAccount">
+        <View
+          testID="signinOrCreateAccount"
+          style={[a.w_full, a.mx_auto, {maxWidth: 450}]}>
           <Button
             testID="createAccountButton"
             onPress={onPressCreateAccount}

src/view/com/pager/TabBar.tsx

@@ -1,11 +1,12 @@
-import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native'
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
-import {Text} from '../util/text/Text'
+
-import {PressableWithHover} from '../util/PressableWithHover'
+import {isNative, isNativeTablet} from '#/platform/detection'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {PressableWithHover} from '../util/PressableWithHover'
+import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
-import {isNative} from '#/platform/detection'
 
 export interface TabBarProps {
   testID?: string
@@ -36,8 +37,9 @@ export function TabBar({
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
   )
-  const {isDesktop, isTablet} = useWebMediaQueries()
+  const {isTabletOrDesktop} = useWebMediaQueries()
-  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
+  const styles =
+    isTabletOrDesktop && !isNativeTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
     if (isNative) {
@@ -137,7 +139,7 @@ export function TabBar({
               onPress={() => onPressItem(i)}>
               <View style={[styles.itemInner, selected && indicatorStyle]}>
                 <Text
-                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
+                  type={isTabletOrDesktop ? 'xl-bold' : 'lg-bold'}
                   testID={testID ? `${testID}-${item}` : undefined}
                   style={selected ? pal.text : pal.textLight}>
                   {item}

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

@@ -4,7 +4,7 @@ import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {isWeb} from '#/platform/detection'
+import {isNativeTablet, isWeb} from '#/platform/detection'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {clamp} from 'lib/numbers'
@@ -40,7 +40,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
           styles.outer,
           size,
           tabletSpacing,
-          isMobile && fabMinimalShellTransform,
+          (isMobile || isNativeTablet) && fabMinimalShellTransform,
         ]}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {ScrollView, StyleSheet, View} from 'react-native'
 
-import {isWeb} from '#/platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -73,9 +72,7 @@ export const LoggedOutLayout = ({
             contentContainerStyle={styles.scrollViewContentContainer}
             keyboardShouldPersistTaps="handled"
             keyboardDismissMode="on-drag">
-            <View style={[styles.contentWrapper, isWeb && a.my_auto]}>
+            <View style={[styles.contentWrapper]}>{children}</View>
-              {children}
-            </View>
           </ScrollView>
         </View>
       ) : (
@@ -92,6 +89,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     // @ts-ignore web only
     height: '100vh',
+    flex: 1,
   },
   side: {
     flex: 1,
@@ -111,8 +109,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollViewContentContainer: {
-    flex: 1,
+    flexGrow: 1,
     paddingHorizontal: 40,
+    justifyContent: 'center',
   },
   leadinText: {
     fontSize: 36,

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

@@ -11,7 +11,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {colors} from 'lib/styles'
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)
-import {isWeb} from 'platform/detection'
+import {isNativeTablet, isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
 
 export function LoadLatestBtn({
@@ -33,7 +33,9 @@ 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
+    ? isMobile || isNativeTablet
+    : isTabletOrMobile
 
   return (
     <AnimatedTouchableOpacity
@@ -43,7 +45,7 @@ export function LoadLatestBtn({
           (isTallViewport
             ? styles.loadLatestOutOfLine
             : styles.loadLatestInline),
-        isTablet && styles.loadLatestInline,
+        isTablet && !isNativeTablet && styles.loadLatestInline,
         pal.borderDark,
         pal.view,
         showBottomBar && fabMinimalShellTransform,
@@ -73,9 +75,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  // @ts-ignore web only
   loadLatestInline: isWeb
     ? {
-        // @ts-ignore web only
         left: 'calc(50vw - 282px)',
       }
     : {},