Fix auth flow, FAB, and and load latest button

src/view/com/auth/SplashScreen.tsx

@@ -41,7 +41,14 @@ export const SplashScreen = ({
         </View>
         <View
           testID="signinOrCreateAccount"
-          style={[a.px_xl, a.gap_md, a.pb_2xl]}>
+          style={[
+            a.px_xl,
+            a.gap_md,
+            a.pb_2xl,
+            a.w_full,
+            a.mx_auto,
+            {maxWidth: 450},
+          ]}>
           <Button
             testID="createAccountButton"
             onPress={onPressCreateAccount}

src/view/com/pager/TabBar.tsx

@@ -3,7 +3,7 @@ import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
+import {isNative, isNativeTablet} from '#/platform/detection'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {Text} from '../util/text/Text'
 import {DraggableScrollView} from './DraggableScrollView'
@@ -37,8 +37,9 @@ export function TabBar({
     () => ({borderBottomColor: indicatorColor || pal.colors.link}),
     [indicatorColor, pal],
   )
-  const {isDesktop, isTablet} = useWebMediaQueries()
-  const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const styles =
+    isTabletOrDesktop && !isNativeTablet ? desktopStyles : mobileStyles
 
   useEffect(() => {
     if (isNative) {
@@ -143,7 +144,7 @@ export function TabBar({
               <View style={[styles.itemInner, selected && indicatorStyle]}>
                 <Text
                   emoji
-                  type={isDesktop || isTablet ? 'xl-bold' : 'lg-bold'}
+                  type={isTabletOrDesktop ? 'xl-bold' : 'lg-bold'}
                   testID={testID ? `${testID}-${item}` : undefined}
                   style={[
                     selected ? pal.text : pal.textLight,

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

@@ -10,7 +10,7 @@ import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {gradients} from '#/lib/styles'
-import {isWeb} from '#/platform/detection'
+import {isNativeTablet, isWeb} from '#/platform/detection'
 import {ios} from '#/alf'
 
 export interface FABProps
@@ -37,7 +37,7 @@ export function FABInner({testID, icon, onPress, ...props}: FABProps) {
         styles.outer,
         size,
         tabletSpacing,
-        isMobile && fabMinimalShellTransform,
+        (isMobile || isNativeTablet) && fabMinimalShellTransform,
       ]}>
       <PressableScale
         testID={testID}

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

@@ -5,7 +5,6 @@ import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isWeb} from '#/platform/detection'
 import {atoms as a} from '#/alf'
 import {Text} from '../text/Text'
 
@@ -79,9 +78,7 @@ export const LoggedOutLayout = ({
             contentContainerStyle={styles.scrollViewContentContainer}
             keyboardShouldPersistTaps="handled"
             keyboardDismissMode="on-drag">
-            <View style={[styles.contentWrapper, isWeb && a.my_auto]}>
-              {children}
-            </View>
+            <View style={[styles.contentWrapper]}>{children}</View>
           </ScrollView>
         </View>
       ) : (
@@ -98,6 +95,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     // @ts-ignore web only
     height: '100vh',
+    flex: 1,
   },
   side: {
     flex: 1,
@@ -114,8 +112,9 @@ const styles = StyleSheet.create({
     flex: 2,
   },
   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 {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {colors} from '#/lib/styles'
-import {isWeb} from '#/platform/detection'
+import {isNativeTablet, isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
 
 const AnimatedTouchableOpacity =
@@ -37,7 +37,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
 
   const bottomPosition = isTablet
     ? {bottom: 50}
@@ -51,7 +53,7 @@ export function LoadLatestBtn({
           (isTallViewport
             ? styles.loadLatestOutOfLine
             : styles.loadLatestInline),
-        isTablet && styles.loadLatestInline,
+        isTablet && !isNativeTablet && styles.loadLatestInline,
         pal.borderDark,
         pal.view,
         bottomPosition,