From 8fa0cbfa2352a762554a24b49bc7cd0a344334aa Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 25 Nov 2025 09:02:07 -0500
Subject: [PATCH] MM-66509: Reduce channel banner height and adjust padding
 (#9267)

* MM-66509: Reduce channel banner height and adjust padding
- Reduce banner height from 40px to 32px
- Decrease padding from 10px to 5px (top/bottom) and 16px to 8px (left/right)
- Add center alignment to banner text container
- Apply typography styles directly to banner text
---
 app/constants/view.ts                                  |  2 +-
 .../channel/header/channel_banner/channel_banner.tsx   | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/constants/view.ts b/app/constants/view.ts
index 6a33c9816..05564bfcb 100644
--- a/app/constants/view.ts
+++ b/app/constants/view.ts
@@ -31,7 +31,7 @@ export const CALL_NOTIFICATION_BAR_HEIGHT = 40;
 
 export const ANNOUNCEMENT_BAR_HEIGHT = 40;
 export const BOOKMARKS_BAR_HEIGHT = 48;
-export const CHANNEL_BANNER_HEIGHT = 40;
+export const CHANNEL_BANNER_HEIGHT = 32;
 
 export const HOME_PADDING = {
     paddingLeft: 18,
diff --git a/app/screens/channel/header/channel_banner/channel_banner.tsx b/app/screens/channel/header/channel_banner/channel_banner.tsx
index 7bf392892..ee362039f 100644
--- a/app/screens/channel/header/channel_banner/channel_banner.tsx
+++ b/app/screens/channel/header/channel_banner/channel_banner.tsx
@@ -7,6 +7,7 @@ import {Text, TouchableOpacity, View} from 'react-native';
 
 import ExpandedAnnouncementBanner from '@components/announcement_banner/expanded_announcement_banner';
 import RemoveMarkdown from '@components/remove_markdown';
+import {CHANNEL_BANNER_HEIGHT} from '@constants/view';
 import {useTheme} from '@context/theme';
 import {useDefaultHeaderHeight} from '@hooks/header';
 import {bottomSheet} from '@screens/navigation';
@@ -26,11 +27,11 @@ const CLOSE_BUTTON_ID = 'channel-banner-close';
 
 const getStyleSheet = (bannerTextColor: string) => ({
     container: {
-        paddingTop: 10,
-        paddingBottom: 10,
+        paddingTop: 5,
+        paddingBottom: 5,
         paddingLeft: 16,
         paddingRight: 16,
-        height: 40,
+        height: CHANNEL_BANNER_HEIGHT,
     },
     containerTopItem: {
         borderTopLeftRadius: 12,
@@ -45,9 +46,12 @@ const getStyleSheet = (bannerTextColor: string) => ({
     bannerTextContainer: {
         flex: 1,
         flexGrow: 1,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
     },
     bannerText: {
         textAlign: 'center' as const,
+
     },
 });