move header inside sticky area (bluesky-social#7163)

Signez · Dec 26, 2024 · 9b07919 · 9b07919
1 parent f22fc34
commit 9b07919
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx
@@ -107,34 +107,34 @@ export default function HashtagScreen({
 
   return (
     <Layout.Screen>
-      <Layout.Header.Outer noBottomBorder>
-        <Layout.Header.BackButton />
-        <Layout.Header.Content>
-          <Layout.Header.TitleText>{headerTitle}</Layout.Header.TitleText>
-          {author && (
-            <Layout.Header.SubtitleText>
-              {_(msg`From @${sanitizedAuthor}`)}
-            </Layout.Header.SubtitleText>
-          )}
-        </Layout.Header.Content>
-        <Layout.Header.Slot>
-          <Button
-            label={_(msg`Share`)}
-            size="small"
-            variant="ghost"
-            color="primary"
-            shape="round"
-            onPress={onShare}
-            hitSlop={HITSLOP_10}
-            style={[{right: -3}]}>
-            <ButtonIcon icon={Share} size="md" />
-          </Button>
-        </Layout.Header.Slot>
-      </Layout.Header.Outer>
       <Pager
         onPageSelected={onPageSelected}
         renderTabBar={props => (
           <Layout.Center style={[a.z_10, web([a.sticky, {top: 0}])]}>
+            <Layout.Header.Outer noBottomBorder>
+              <Layout.Header.BackButton />
+              <Layout.Header.Content>
+                <Layout.Header.TitleText>{headerTitle}</Layout.Header.TitleText>
+                {author && (
+                  <Layout.Header.SubtitleText>
+                    {_(msg`From @${sanitizedAuthor}`)}
+                  </Layout.Header.SubtitleText>
+                )}
+              </Layout.Header.Content>
+              <Layout.Header.Slot>
+                <Button
+                  label={_(msg`Share`)}
+                  size="small"
+                  variant="ghost"
+                  color="primary"
+                  shape="round"
+                  onPress={onShare}
+                  hitSlop={HITSLOP_10}
+                  style={[{right: -3}]}>
+                  <ButtonIcon icon={Share} size="md" />
+                </Button>
+              </Layout.Header.Slot>
+            </Layout.Header.Outer>
             <TabBar items={sections.map(section => section.title)} {...props} />
           </Layout.Center>
         )}

diff --git a/src/screens/Topic.tsx b/src/screens/Topic.tsx
@@ -88,29 +88,29 @@ export default function TopicScreen({
 
   return (
     <Layout.Screen>
-      <Layout.Header.Outer noBottomBorder>
-        <Layout.Header.BackButton />
-        <Layout.Header.Content>
-          <Layout.Header.TitleText>{headerTitle}</Layout.Header.TitleText>
-        </Layout.Header.Content>
-        <Layout.Header.Slot>
-          <Button
-            label={_(msg`Share`)}
-            size="small"
-            variant="ghost"
-            color="primary"
-            shape="round"
-            onPress={onShare}
-            hitSlop={HITSLOP_10}
-            style={[{right: -3}]}>
-            <ButtonIcon icon={Share} size="md" />
-          </Button>
-        </Layout.Header.Slot>
-      </Layout.Header.Outer>
       <Pager
         onPageSelected={onPageSelected}
         renderTabBar={props => (
           <Layout.Center style={[a.z_10, web([a.sticky, {top: 0}])]}>
+            <Layout.Header.Outer noBottomBorder>
+              <Layout.Header.BackButton />
+              <Layout.Header.Content>
+                <Layout.Header.TitleText>{headerTitle}</Layout.Header.TitleText>
+              </Layout.Header.Content>
+              <Layout.Header.Slot>
+                <Button
+                  label={_(msg`Share`)}
+                  size="small"
+                  variant="ghost"
+                  color="primary"
+                  shape="round"
+                  onPress={onShare}
+                  hitSlop={HITSLOP_10}
+                  style={[{right: -3}]}>
+                  <ButtonIcon icon={Share} size="md" />
+                </Button>
+              </Layout.Header.Slot>
+            </Layout.Header.Outer>
             <TabBar items={sections.map(section => section.title)} {...props} />
           </Layout.Center>
         )}