From 605c50d6c7e848a2581dbf9fe02c21da28225b25 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 12:39:20 -0700
Subject: [PATCH 01/10] style(ui): use larger border radius on video post card

Updated CompactVideoPostCard to use a larger border radius by replacing
rounded_md with rounded_lg.
---
 src/components/VideoPostCard.tsx                | 6 +++---
 src/components/interstitials/TrendingVideos.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx
index 191c7b82a2..99ac53eaff 100644
--- a/src/components/VideoPostCard.tsx
+++ b/src/components/VideoPostCard.tsx
@@ -421,7 +421,7 @@ export function CompactVideoPostCard({
           <View
             style={[
               a.justify_center,
-              a.rounded_md,
+              a.rounded_lg,
               a.overflow_hidden,
               {
                 backgroundColor: black,
@@ -462,7 +462,7 @@ export function CompactVideoPostCard({
           <View
             style={[
               a.justify_center,
-              a.rounded_md,
+              a.rounded_lg,
               a.overflow_hidden,
               {
                 backgroundColor: black,
@@ -537,7 +537,7 @@ export function CompactVideoPostCardPlaceholder() {
     <View style={[a.flex_1]}>
       <View
         style={[
-          a.rounded_md,
+          a.rounded_lg,
           a.overflow_hidden,
           {
             backgroundColor: black,
diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index fab738b9cb..3ed3eadd8c 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -193,7 +193,7 @@ function VideoCards({
             a.justify_center,
             a.align_center,
             a.flex_1,
-            a.rounded_md,
+            a.rounded_lg,
             t.atoms.bg,
           ]}>
           {({pressed}) => (

From ce02e4aa3d7ba9ad12c0b3d6861ea4c436e93aef Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 13:32:56 -0700
Subject: [PATCH 02/10] feat(atoms): add overflow_visible utility

Added the `overflow_visible` atom to the atoms utility object for
setting CSS overflow to 'visible'. This complements the existing
`overflow_hidden` atom and improves flexibility for layout styling.
---
 src/alf/atoms.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 440ac16ac9..5725602172 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -67,6 +67,9 @@ export const atoms = {
     zIndex: 50,
   },
 
+  overflow_visible: {
+    overflow: 'visible',
+  },
   overflow_hidden: {
     overflow: 'hidden',
   },

From 12e67f53dd6ca0d807eab84813543b663e4b260d Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 13:34:06 -0700
Subject: [PATCH 03/10] fix(ui): overflow for TrendingVideos scroll container

Added overflow_hidden to the main container and set overflow_visible on
the FlatList to ensure proper display of horizontally scrolling cards.
This resolves clipping issues and improves the visual layout of trending
videos.
---
 src/components/interstitials/TrendingVideos.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index 3ed3eadd8c..b760663309 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -71,6 +71,7 @@ export function TrendingVideos() {
         a.pt_lg,
         a.pb_lg,
         a.border_t,
+        a.overflow_hidden,
         t.atoms.border_contrast_low,
         t.atoms.bg_contrast_25,
       ]}>
@@ -104,7 +105,8 @@ export function TrendingVideos() {
           horizontal
           showsHorizontalScrollIndicator={false}
           decelerationRate="fast"
-          snapToInterval={CARD_WIDTH + a.gap_sm.gap}>
+          snapToInterval={CARD_WIDTH + a.gap_sm.gap}
+          style={[a.overflow_visible]}>
           <View
             style={[
               a.flex_row,

From b89645a172b56c51e6b886072bf53aecd6834b14 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 13:54:22 -0700
Subject: [PATCH 04/10] feat(ui): add shadow to video post trending cards

Added a small shadow (shadow_sm) to the CompactVideoPostCard and the
"View more" card in TrendingVideos for improved visual depth and
consistency. This enhances the card appearance and aligns with the
design system.
---
 src/components/VideoPostCard.tsx                | 3 ++-
 src/components/interstitials/TrendingVideos.tsx | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx
index 99ac53eaff..4cb4c4a75c 100644
--- a/src/components/VideoPostCard.tsx
+++ b/src/components/VideoPostCard.tsx
@@ -411,6 +411,7 @@ export function CompactVideoPostCard({
       onPressOut={onPressOut}
       style={[
         a.flex_col,
+        t.atoms.shadow_sm,
         {
           alignItems: undefined,
           justifyContent: undefined,
@@ -534,7 +535,7 @@ export function CompactVideoPostCardPlaceholder() {
   const black = getBlackColor(t)
 
   return (
-    <View style={[a.flex_1]}>
+    <View style={[a.flex_1, t.atoms.shadow_sm]}>
       <View
         style={[
           a.rounded_lg,
diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index b760663309..8eaa13be00 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -197,6 +197,7 @@ function VideoCards({
             a.flex_1,
             a.rounded_lg,
             t.atoms.bg,
+            t.atoms.shadow_sm,
           ]}>
           {({pressed}) => (
             <View

From 66950a08cb0551fe600bf8c8d14f5e58632c11d5 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 15:18:07 -0700
Subject: [PATCH 05/10] feat(ui): add border to video post and trending cards

Added a border and low contrast border color to CompactVideoPostCard,
CompactVideoPostCardPlaceholder, and TrendingVideos card components for
improved visual separation.
---
 src/components/VideoPostCard.tsx                | 8 ++++++++
 src/components/interstitials/TrendingVideos.tsx | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx
index 4cb4c4a75c..a1bdd29b4b 100644
--- a/src/components/VideoPostCard.tsx
+++ b/src/components/VideoPostCard.tsx
@@ -424,6 +424,8 @@ export function CompactVideoPostCard({
               a.justify_center,
               a.rounded_lg,
               a.overflow_hidden,
+              a.border,
+              t.atoms.border_contrast_low,
               {
                 backgroundColor: black,
                 aspectRatio: 9 / 16,
@@ -444,6 +446,8 @@ export function CompactVideoPostCard({
                   a.inset_0,
                   a.justify_center,
                   a.align_center,
+                  a.border,
+                  t.atoms.border_contrast_low,
                   {
                     backgroundColor: 'black',
                     opacity: 0.2,
@@ -465,6 +469,8 @@ export function CompactVideoPostCard({
               a.justify_center,
               a.rounded_lg,
               a.overflow_hidden,
+              a.border,
+              t.atoms.border_contrast_low,
               {
                 backgroundColor: black,
                 aspectRatio: 9 / 16,
@@ -540,6 +546,8 @@ export function CompactVideoPostCardPlaceholder() {
         style={[
           a.rounded_lg,
           a.overflow_hidden,
+          a.border,
+          t.atoms.border_contrast_low,
           {
             backgroundColor: black,
             aspectRatio: 9 / 16,
diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index 8eaa13be00..c64da3b5da 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -196,6 +196,8 @@ function VideoCards({
             a.align_center,
             a.flex_1,
             a.rounded_lg,
+            a.border,
+            t.atoms.border_contrast_low,
             t.atoms.bg,
             t.atoms.shadow_sm,
           ]}>

From 229f275246f12b563ea89faab1cbe3f27b98e404 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 15:32:44 -0700
Subject: [PATCH 06/10] fix(ui): adjust TrendingVideos padding and gap sizes

Reduced top padding from large to small and updated horizontal padding
handling for the TrendingVideos component. Increased card gap and snap
interval from small to medium.
---
 src/components/interstitials/TrendingVideos.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index c64da3b5da..439803dfad 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -68,7 +68,7 @@ export function TrendingVideos() {
   return (
     <View
       style={[
-        a.pt_lg,
+        a.pt_sm,
         a.pb_lg,
         a.border_t,
         a.overflow_hidden,
@@ -105,12 +105,12 @@ export function TrendingVideos() {
           horizontal
           showsHorizontalScrollIndicator={false}
           decelerationRate="fast"
-          snapToInterval={CARD_WIDTH + a.gap_sm.gap}
+          snapToInterval={CARD_WIDTH + a.gap_md.gap}
           style={[a.overflow_visible]}>
           <View
             style={[
               a.flex_row,
-              a.gap_sm,
+              a.gap_md,
               {
                 paddingLeft: gutters.paddingLeft,
                 paddingRight: gutters.paddingRight,

From c1d2aea885e8ec32b40b9710d0da641fe75dac91 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 15:50:51 -0700
Subject: [PATCH 07/10] feat(ui): remove the header icon

Replace the header's flex row with a single bold text element for
"Trending Videos", removing the Graph icon and extra container.
---
 src/components/interstitials/TrendingVideos.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index 439803dfad..3ad5625c39 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -83,12 +83,9 @@ export function TrendingVideos() {
           a.align_center,
           a.justify_between,
         ]}>
-        <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_xs]}>
-          <Graph />
-          <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
-            <Trans>Trending Videos</Trans>
-          </Text>
-        </View>
+        <Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
+          <Trans>Trending Videos</Trans>
+        </Text>
         <Button
           label={_(msg`Dismiss this section`)}
           size="tiny"

From 0685de9b7ff26e555f50dfb8819f60fa85d68a39 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 15:52:53 -0700
Subject: [PATCH 08/10] feat(ui): update TrendingVideos dismiss button style

Changed the TrendingVideos dismiss button to use solid variant and
square shape for improved visibility. Also set ButtonIcon size to "sm"
for better alignment with the new button style.
---
 src/components/interstitials/TrendingVideos.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index 3ad5625c39..c95311d0ec 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -89,11 +89,11 @@ export function TrendingVideos() {
         <Button
           label={_(msg`Dismiss this section`)}
           size="tiny"
-          variant="ghost"
+          variant="solid"
           color="secondary"
-          shape="round"
+          shape="square"
           onPress={() => trendingPrompt.open()}>
-          <ButtonIcon icon={X} />
+          <ButtonIcon icon={X} size="sm" />
         </Button>
       </View>
 

From 269d70e66c7f3616664990a053350fd873a12472 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 16:32:15 -0700
Subject: [PATCH 09/10] feat(ui): increase the trending videos card size

---
 src/components/interstitials/TrendingVideos.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index c95311d0ec..f5d972f4ae 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -25,7 +25,7 @@ import {
   CompactVideoPostCardPlaceholder,
 } from '#/components/VideoPostCard'
 
-const CARD_WIDTH = 100
+const CARD_WIDTH = 108
 
 const FEED_DESC = `feedgen|${VIDEO_FEED_URI}`
 const FEED_PARAMS: {

From 742397bb1a0d13c163dd92a8271f8468159bcc4f Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 12:31:34 -0700
Subject: [PATCH 10/10] fix(lint): remove unused import

---
 src/components/interstitials/TrendingVideos.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx
index f5d972f4ae..4d59e2fb5c 100644
--- a/src/components/interstitials/TrendingVideos.tsx
+++ b/src/components/interstitials/TrendingVideos.tsx
@@ -16,7 +16,6 @@ import {atoms as a, useGutters, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
 import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'