Fix auth flow, FAB, and and load latest button

app.config.js

@@ -77,7 +77,7 @@ module.exports = function (config) {
       // hsl(211, 99%, 53%), same as palette.default.brandText
       primaryColor: '#1083fe',
       ios: {
-        supportsTablet: false,
+        supportsTablet: true,
         bundleIdentifier: 'xyz.blueskyweb.app',
         config: {
           usesNonExemptEncryption: false,

src/lib/hooks/useWebMediaQueries.tsx

@@ -1,6 +1,6 @@
 import {useMediaQuery} from 'react-responsive'
 
-import {isNative} from '#/platform/detection'
+import {isNative, isNativeTablet} from '#/platform/detection'
 
 export function useWebMediaQueries() {
   const isDesktop = useMediaQuery({minWidth: 1300})
@@ -8,6 +8,15 @@ export function useWebMediaQueries() {
   const isMobile = useMediaQuery({maxWidth: 800 - 1})
   const isTabletOrMobile = isMobile || isTablet
   const isTabletOrDesktop = isDesktop || isTablet
+  if (isNativeTablet) {
+    return {
+      isMobile: false,
+      isTablet: true,
+      isTabletOrMobile: true,
+      isTabletOrDesktop: true,
+      isDesktop: false,
+    }
+  }
   if (isNative) {
     return {
       isMobile: true,

src/platform/detection.ts

@@ -3,6 +3,7 @@ import {Platform} from 'react-native'
 export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
 export const isNative = isIOS || isAndroid
+export const isNativeTablet = Platform.OS === 'ios' && Platform.isPad
 export const devicePlatform = isIOS ? 'ios' : isAndroid ? 'android' : 'web'
 export const isWeb = !isNative
 export const isMobileWebMediaQuery = 'only screen and (max-width: 1300px)'

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/layouts/withBreakpoints.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
 
 export const withBreakpoints = <P extends object>(
   Mobile: React.ComponentType<P>,
@@ -9,12 +8,12 @@ export const withBreakpoints = <P extends object>(
   Desktop: React.ComponentType<P>,
 ): React.FC<P> =>
   function WithBreakpoints(props: P) {
-    const {isMobile, isTabletOrMobile} = useWebMediaQueries()
+    const {isMobile, isTablet} = useWebMediaQueries()
 
-    if (isMobile || isNative) {
+    if (isMobile) {
       return <Mobile {...props} />
     }
-    if (isTabletOrMobile) {
+    if (isTablet) {
       return <Tablet {...props} />
     }
     return <Desktop {...props} />

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,
@@ -81,10 +83,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  loadLatestInline: {
-    // @ts-ignore web only
-    left: 'calc(50vw - 282px)',
-  },
+  // @ts-ignore web only
+  loadLatestInline: isWeb
+    ? {
+        left: 'calc(50vw - 282px)',
+      }
+    : {},
   loadLatestOutOfLine: {
     // @ts-ignore web only
     left: 'calc(50vw - 382px)',