diff --git a/src/view/com/util/post-embeds/GithubGist.tsx b/src/view/com/util/post-embeds/GithubGist.tsx
index fd165d742a..763e646b93 100644
--- a/src/view/com/util/post-embeds/GithubGist.tsx
+++ b/src/view/com/util/post-embeds/GithubGist.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {View} from 'react-native'
+import {LayoutChangeEvent,ScrollView, View} from 'react-native'
+import {LinearGradient} from 'expo-linear-gradient'
 import {AppBskyEmbedExternal} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -9,8 +10,11 @@ import {shareUrl} from '#/lib/sharing'
 import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
-import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {ChevronBottom_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {CodeBrackets_Stroke2_Corner0_Rounded as Code} from '#/components/icons/CodeBrackets'
+import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -24,6 +28,8 @@ export function GithubGist({
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const [footerHeight, setFooterHeight] = React.useState(100)
+  const [showMore, setShowMore] = React.useState(false)
 
   const {data: files, isLoading} = useQuery({
     queryKey: ['gist', id],
@@ -49,106 +55,199 @@ export function GithubGist({
     }
   }, [info.uri])
 
-  return (
-    <Link
-      label={info.title || _(msg`Open this Gist`)}
-      to={info.uri}
-      onLongPress={onShareExternal}>
-      {({hovered}) => (
-        <View
-          style={[
-            a.transition_color,
-            a.flex_col,
-            a.rounded_md,
-            a.overflow_hidden,
-            a.w_full,
-            a.border,
-            hovered
-              ? t.atoms.border_contrast_high
-              : t.atoms.border_contrast_low,
-          ]}>
-          <View style={[a.p_lg, t.atoms.bg_contrast_25]}>
-            {isLoading || !files ? (
-              <Loader />
-            ) : (
-              <View>
-                <Text
-                  style={[
-                    a.text_sm,
-                    a.italic,
-                    t.atoms.text_contrast_low,
-                    a.pb_sm,
-                  ]}>
-                  {files[0].filename}
-                </Text>
-                <Text
-                  style={[
-                    {
-                      fontFamily: 'monospace',
-                    },
-                  ]}>
-                  {files[0].content}
-                </Text>
-              </View>
-            )}
-          </View>
+  const onFooterLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      setFooterHeight(e.nativeEvent.layout.height)
+    },
+    [setFooterHeight],
+  )
 
-          <View
-            style={[
-              a.flex_1,
-              a.pt_sm,
-              {gap: 3},
-              a.border_t,
-              hovered
-                ? t.atoms.border_contrast_high
-                : t.atoms.border_contrast_low,
-            ]}>
-            <View style={[{gap: 3}, a.pb_xs, a.px_md]}>
-              <Text
-                emoji
-                numberOfLines={3}
-                style={[a.text_md, a.font_bold, a.leading_snug]}>
-                {info.title || info.uri}
-              </Text>
+  const onShowMore = React.useCallback(() => {
+    setShowMore(true)
+  }, [setShowMore])
+
+  return (
+    <View
+      style={[
+        a.transition_color,
+        a.flex_col,
+        a.rounded_md,
+        a.overflow_hidden,
+        a.w_full,
+        a.border,
+        t.atoms.border_contrast_low,
+      ]}>
+      <View style={[t.atoms.bg_contrast_25]}>
+        {isLoading || !files ? (
+          <View style={[a.px_lg]}>
+            <Loader />
+          </View>
+        ) : (
+          <View style={[a.relative]}>
+            <View style={[a.relative]}>
+              <ScrollView
+                style={[a.pt_lg, {maxHeight: showMore ? undefined : 500}]}>
+                <ScrollView horizontal style={[{paddingBottom: footerHeight}]}>
+                  <View>
+                    <View
+                      style={[
+                        a.flex_row,
+                        a.align_center,
+                        a.gap_xs,
+                        a.px_lg,
+                        a.pb_md,
+                      ]}>
+                      <Code
+                        size="xs"
+                        style={[
+                          a.transition_color,
+                          {color: t.palette.primary_500},
+                        ]}
+                      />
+
+                      <Text
+                        style={[
+                          a.text_sm,
+                          a.italic,
+                          t.atoms.text_contrast_low,
+                        ]}>
+                        {files[0].filename}
+                      </Text>
+                    </View>
+                    <Text
+                      style={[
+                        a.px_lg,
+                        {
+                          fontFamily: 'monospace',
+                        },
+                      ]}>
+                      {files[0].content}
+                    </Text>
+                  </View>
+                </ScrollView>
+              </ScrollView>
+
+              {!showMore && <View style={[a.absolute, a.inset_0]} />}
             </View>
-            <View style={[a.px_md]}>
-              <Divider />
-              <View
-                style={[
-                  a.flex_row,
-                  a.align_center,
-                  a.gap_2xs,
-                  a.pb_sm,
-                  {
-                    paddingTop: 6, // off menu
-                  },
-                ]}>
-                <Globe
-                  size="xs"
-                  style={[
-                    a.transition_color,
-                    hovered
-                      ? t.atoms.text_contrast_medium
-                      : t.atoms.text_contrast_low,
-                  ]}
-                />
-                <Text
-                  numberOfLines={1}
-                  style={[
-                    a.transition_color,
-                    a.text_xs,
-                    a.leading_tight,
-                    hovered
-                      ? t.atoms.text_contrast_high
-                      : t.atoms.text_contrast_medium,
-                  ]}>
-                  {toNiceDomain(info.uri)}
-                </Text>
-              </View>
+
+            <View
+              style={[a.absolute, a.inset_0, a.p_lg, {top: 'auto'}]}
+              onLayout={onFooterLayout}>
+              {!showMore && (
+                <View style={[a.absolute, a.inset_0]}>
+                  <View
+                    style={[
+                      a.absolute,
+                      a.flex_row,
+                      a.justify_center,
+                      {
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        transform: [{translateY: '-100%'}],
+                      },
+                    ]}>
+                    <Button
+                      label={_(msg`Show more`)}
+                      size="small"
+                      variant="solid"
+                      color="primary"
+                      style={[
+                        a.rounded_full,
+                        {
+                          paddingVertical: 6,
+                        },
+                      ]}
+                      onPress={onShowMore}>
+                      <ButtonText>Show more</ButtonText>
+                      <ButtonIcon icon={Chevron} size="sm" position="right" />
+                    </Button>
+                  </View>
+                  <LinearGradient
+                    colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.5)']}
+                    locations={[0, 1]}
+                    start={{x: 0, y: 0}}
+                    end={{x: 0, y: 1}}
+                    style={[a.absolute, a.inset_0]}
+                  />
+                </View>
+              )}
+
+              <Link
+                label={info.title || _(msg`Open this Gist`)}
+                to={info.uri}
+                onLongPress={onShareExternal}>
+                {({hovered}) => (
+                  <View
+                    style={[
+                      a.flex_1,
+                      a.pt_sm,
+                      a.rounded_sm,
+                      a.border,
+                      {gap: 3},
+                      t.atoms.bg_contrast_100,
+                      t.atoms.border_contrast_high,
+                      hovered && {
+                        borderColor: t.palette.contrast_400,
+                      },
+                    ]}>
+                    <View style={[{gap: 3}, a.pb_xs, a.px_md]}>
+                      <Text
+                        emoji
+                        numberOfLines={3}
+                        style={[a.text_md, a.font_bold, a.leading_snug]}>
+                        {info.title || info.uri}
+                      </Text>
+                    </View>
+                    <View style={[a.px_md]}>
+                      <Divider
+                        style={[
+                          t.atoms.border_contrast_high,
+                          hovered && {
+                            borderColor: t.palette.contrast_400,
+                          },
+                        ]}
+                      />
+                      <View
+                        style={[
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_xs,
+                          a.pb_sm,
+                          {
+                            paddingTop: 6, // off menu
+                          },
+                        ]}>
+                        <Globe
+                          size="xs"
+                          style={[
+                            a.transition_color,
+                            hovered
+                              ? t.atoms.text_contrast_medium
+                              : t.atoms.text_contrast_low,
+                          ]}
+                        />
+                        <Text
+                          numberOfLines={1}
+                          style={[
+                            a.transition_color,
+                            a.text_xs,
+                            a.leading_tight,
+                            hovered
+                              ? t.atoms.text_contrast_high
+                              : t.atoms.text_contrast_medium,
+                          ]}>
+                          {toNiceDomain(info.uri)}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                )}
+              </Link>
             </View>
           </View>
-        </View>
-      )}
-    </Link>
+        )}
+      </View>
+    </View>
   )
 }