sticky headers

src/screens/Settings/AboutSettings.tsx

@@ -21,7 +21,6 @@ export function AboutSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -31,6 +30,7 @@ export function AboutSettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.LinkItem
             to="https://bsky.social/about/support/tos"

src/screens/Settings/AccessibilitySettings.tsx

@@ -39,7 +39,6 @@ export function AccessibilitySettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -49,6 +48,7 @@ export function AccessibilitySettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
             <SettingsList.ItemIcon icon={AccessibilityIcon} />

src/screens/Settings/AccountSettings.tsx

@@ -38,7 +38,6 @@ export function AccountSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -48,7 +47,7 @@ export function AccountSettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
-
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Item>
             <SettingsList.ItemIcon icon={EnvelopeIcon} />

src/screens/Settings/AppIconSettings.tsx

@@ -20,8 +20,6 @@ export function AppIconSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content
-        contentContainerStyle={[a.py_2xl, a.px_xl, {paddingBottom: 100}]}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -31,6 +29,8 @@ export function AppIconSettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content
+        contentContainerStyle={[a.py_2xl, a.px_xl, {paddingBottom: 100}]}>
         <Text style={[a.text_lg, a.font_heavy]}>Defaults</Text>
         <View style={[a.flex_row, a.flex_wrap]}>
           {sets.defaults.map(icon => (

src/screens/Settings/AppPasswords.tsx

@@ -44,7 +44,6 @@ export function AppPasswordsScreen({}: Props) {
 
   return (
     <Layout.Screen testID="AppPasswordsScreen" temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -54,6 +53,7 @@ export function AppPasswordsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         {error ? (
           <ErrorScreen
             title={_(msg`Oops!`)}

src/screens/Settings/AppearanceSettings.tsx

@@ -79,7 +79,6 @@ export function AppearanceSettingsScreen({}: Props) {
   return (
     <LayoutAnimationConfig skipExiting skipEntering>
       <Layout.Screen testID="preferencesThreadsScreen" temp__enableWebBorders>
-        <Layout.Content>
         <Layout.Header.Outer>
           <Layout.Header.BackButton />
           <Layout.Header.Content>
@@ -89,6 +88,7 @@ export function AppearanceSettingsScreen({}: Props) {
           </Layout.Header.Content>
           <Layout.Header.Slot />
         </Layout.Header.Outer>
+        <Layout.Content>
           <SettingsList.Container>
             <AppearanceToggleButtonGroup
               title={_(msg`Color mode`)}

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -32,7 +32,6 @@ export function ContentAndMediaSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -42,6 +41,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.LinkItem
             to="/settings/saved-feeds"

src/screens/Settings/ExternalMediaPreferences.tsx

@@ -26,7 +26,6 @@ export function ExternalMediaPreferencesScreen({}: Props) {
     <Layout.Screen
       testID="externalMediaPreferencesScreen"
       temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -36,6 +35,7 @@ export function ExternalMediaPreferencesScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Item>
             <Admonition type="info" style={[a.flex_1]}>

src/screens/Settings/FollowingFeedPreferences.tsx

@@ -48,7 +48,6 @@ export function FollowingFeedPreferencesScreen({}: Props) {
     <Layout.Screen
       testID="followingFeedPreferencesScreen"
       temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -58,6 +57,7 @@ export function FollowingFeedPreferencesScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Item>
             <Admonition type="tip" style={[a.flex_1]}>

src/screens/Settings/LanguageSettings.tsx

@@ -64,7 +64,6 @@ export function LanguageSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen testID="PreferencesLanguagesScreen" temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -74,6 +73,7 @@ export function LanguageSettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Group iconInset={false}>
             <SettingsList.ItemText>

src/screens/Settings/NotificationSettings.tsx

@@ -33,7 +33,6 @@ export function NotificationSettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -43,6 +42,7 @@ export function NotificationSettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         {isQueryError ? (
           <Error
             title={_(msg`Oops!`)}

src/screens/Settings/PrivacyAndSecuritySettings.tsx

@@ -29,7 +29,6 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -39,6 +38,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Item>
             <SettingsList.ItemIcon

src/screens/Settings/Settings.tsx

@@ -73,7 +73,6 @@ export function SettingsScreen({}: Props) {
 
   return (
     <Layout.Screen temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -83,7 +82,7 @@ export function SettingsScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
-
+      <Layout.Content>
         <SettingsList.Container>
           <View
             style={[

src/screens/Settings/ThreadPreferences.tsx

@@ -38,7 +38,6 @@ export function ThreadPreferencesScreen({}: Props) {
 
   return (
     <Layout.Screen testID="threadPreferencesScreen" temp__enableWebBorders>
-      <Layout.Content>
       <Layout.Header.Outer>
         <Layout.Header.BackButton />
         <Layout.Header.Content>
@@ -48,7 +47,7 @@ export function ThreadPreferencesScreen({}: Props) {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
-
+      <Layout.Content>
         <SettingsList.Container>
           <SettingsList.Group>
             <SettingsList.ItemIcon icon={BubblesIcon} />