keybase · chrisnojima · Jun 1, 2026 · Jun 1, 2026
diff --git a/shared/app/global-errors.tsx b/shared/app/global-errors.tsx
@@ -132,12 +132,12 @@ const GlobalError = () => {
     const message = daemonError.message || 'Keybase is currently unreachable. Trying to reconnect you…'
     return (
       <Kb.Box2 direction="vertical" style={styles.containerOverlay}>
-        <Kb.Box2 direction="horizontal" style={styles.overlayRow}>
+        <Kb.Box2 direction="horizontal" centerChildren={true} style={styles.overlayRow}>
           <Kb.Text center={true} type="BodySmallSemibold" style={styles.message}>
             {message}
           </Kb.Text>
         </Kb.Box2>
-        <Kb.Box2 direction="vertical" flex={1} style={styles.overlayFill}>
+        <Kb.Box2 direction="vertical" flex={1} centerChildren={true} style={styles.overlayFill}>
           <Kb.Animation animationType="disconnected" height={175} width={600} />
         </Kb.Box2>
       </Kb.Box2>
@@ -214,7 +214,7 @@ const GlobalError = () => {
 
   return (
     <Kb.ClickableBox style={stylesContainer} onClick={onExpandClick} direction="vertical">
-      <Kb.Box2 direction="horizontal" flex={1} style={styles.innerContainer}>
+      <Kb.Box2 direction="horizontal" flex={1} centerChildren={true} gap="small" style={styles.innerContainer}>
         <Kb.Text center={true} type="BodyBig" style={styles.summary}>
           {summary}
         </Kb.Text>
@@ -271,9 +271,7 @@ const styles = Kb.Styles.styleSheetCreate(() => {
       ...Kb.Styles.padding(8, Kb.Styles.globalMargins.xlarge),
     },
     innerContainer: {
-      ...Kb.Styles.globalStyles.flexBoxCenter,
       backgroundColor: Kb.Styles.globalColors.black,
-      gap: Kb.Styles.globalMargins.small,
       minHeight: maxHeightForSize('Small'),
       ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.small),
     },
@@ -309,11 +307,9 @@ const styles = Kb.Styles.styleSheetCreate(() => {
       ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall),
     },
     overlayFill: {
-      ...Kb.Styles.globalStyles.flexBoxCenter,
       backgroundColor: Kb.Styles.globalColors.white,
     },
     overlayRow: {
-      ...Kb.Styles.globalStyles.flexBoxCenter,
       backgroundColor: Kb.Styles.globalColors.blue,
       padding: 8,
     },

diff --git a/shared/app/out-of-date.tsx b/shared/app/out-of-date.tsx
@@ -11,13 +11,11 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     ...Kb.Styles.globalStyles.fillAbsolute,
     backgroundColor: Kb.Styles.globalColors.red,
     bottom: undefined,
-    padding: Kb.Styles.globalMargins.small,
     zIndex: 9999,
   },
   messageContainer: {
     backgroundColor: Kb.Styles.globalColors.white_90,
     borderRadius: Kb.Styles.borderRadius,
-    padding: Kb.Styles.globalMargins.medium,
   },
 }))
 
@@ -62,11 +60,11 @@ const OutOfDate = () => {
   const message = isMobile ? mobileMessage : outOfDate.message
 
   return !critical ? null : (
-    <Kb.Box2 direction="vertical" fullWidth={true} gap="small" style={styles.container}>
+    <Kb.Box2 direction="vertical" fullWidth={true} gap="small" padding="small" style={styles.container}>
       <Kb.Text center={true} type="Header" negative={true}>
         Your version of Keybase is critically out of date!
       </Kb.Text>
-      <Kb.Box2 direction="vertical" style={styles.messageContainer} fullWidth={true}>
+      <Kb.Box2 direction="vertical" padding="medium" fullWidth={true} style={styles.messageContainer}>
         <Kb.Markdown>{message}</Kb.Markdown>
       </Kb.Box2>
       {isMobile && <Kb.Button label="Update" onClick={openAppStore} />}

diff --git a/shared/app/runtime-stats.tsx b/shared/app/runtime-stats.tsx
@@ -224,9 +224,8 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
   const [moreLogs, setMoreLogs] = React.useState(false)
 
   return (
-    <>
-      <Kb.BoxGrow style={styles.boxGrow}>
-        <Kb.ClickableBox onClick={() => setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
+    <Kb.BoxGrow style={styles.boxGrow}>
+      <Kb.ClickableBox onClick={() => setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}>
             {!moreLogs &&
               stats.processStats?.map((stat, i) => {
                 return (
@@ -303,8 +302,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => {
             )*/}
             <LogStats num={moreLogs ? 25 : 5} />
         </Kb.ClickableBox>
-      </Kb.BoxGrow>
-    </>
+    </Kb.BoxGrow>
   )
 }
 

diff --git a/shared/chat/audio/audio-send.native.tsx b/shared/chat/audio/audio-send.native.tsx
@@ -40,7 +40,7 @@ const AudioSend = (props: Props) => {
   )
   return (
     <Portal hostName="audioSend" useFullScreenOverlay={false}>
-      <Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true} justifyContent="space-between">
+      <Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true} alignItems="center" justifyContent="space-between">
         <Kb.Box2 direction="horizontal" alignItems="center">
           <Kb.Box2 direction="vertical" centerChildren={true} style={styles.icon}>
             <Kb.Icon type="iconfont-remove" onClick={cancelRecording} />
@@ -55,7 +55,6 @@ const AudioSend = (props: Props) => {
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
-    alignItems: 'center',
     borderStyle: 'solid',
     borderTopColor: Kb.Styles.globalColors.black_10,
     borderTopWidth: 1,

diff --git a/shared/chat/blocking/block-modal.tsx b/shared/chat/blocking/block-modal.tsx
@@ -406,7 +406,7 @@ const BlockModal = (ownProps: OwnProps) => {
 
   if (loadingWaiting) {
     return (
-      <Kb.Box2 direction="vertical" style={styles.loadingAnimationBox}>
+      <Kb.Box2 direction="vertical" alignSelf="center" style={styles.loadingAnimationBox}>
         <Kb.Animation animationType="spinner" style={styles.loadingAnimation} />
       </Kb.Box2>
     )
@@ -520,7 +520,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   greyBox: {
     backgroundColor: Kb.Styles.globalColors.blueGrey,
     color: Kb.Styles.globalColors.black_50,
-    width: '100%',
     ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall),
   },
   grow: {flexGrow: 1},
@@ -534,7 +533,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     },
   }),
   loadingAnimationBox: {
-    alignSelf: 'center',
     padding: Kb.Styles.globalMargins.medium,
   },
   modalFooter: Kb.Styles.platformStyles({

diff --git a/shared/chat/blocking/invitation-to-block.tsx b/shared/chat/blocking/invitation-to-block.tsx
@@ -171,8 +171,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       dismissContainer: {
         backgroundColor: Kb.Styles.globalColors.blueGrey,
-        paddingBottom: Kb.Styles.globalMargins.xsmall,
-        paddingTop: Kb.Styles.globalMargins.xsmall,
+        ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xsmall),
       },
       dismissIcon: {
         position: 'absolute',

diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx
@@ -263,7 +263,6 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       container: Kb.Styles.platformStyles({
         common: {
-          alignItems: 'center',
           flexGrow: 1,
           ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small),
           width: '100%',

diff --git a/shared/chat/conversation/bot/search.tsx b/shared/chat/conversation/bot/search.tsx
@@ -140,7 +140,7 @@ const SearchBotPopupInner = (props: Props & {conversationIDKey: T.Chat.Conversat
     renderItem: ({index, item}: {index: number; item: Item}) => {
       return item.type === 'dummy' && item.value === resultEmptyPlaceholder ? (
         <Kb.Text
-          style={{...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.tiny)}}
+          style={styles.paddedItem}
           type="BodySmall"
         >
           No results were found
@@ -170,7 +170,7 @@ const SearchBotPopupInner = (props: Props & {conversationIDKey: T.Chat.Conversat
         <Kb.Box2
           direction="horizontal"
           fullWidth={true}
-          style={{...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.tiny)}}
+          style={styles.paddedItem}
         >
           {item.type === 'dummy' && item.value === userEmptyPlaceholder ? (
             <Kb.Text type="BodySmall">Enter a bot username above</Kb.Text>
@@ -220,6 +220,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   modal: Kb.Styles.platformStyles({
     isElectron: {height: 500},
   }),
+  paddedItem: Kb.Styles.padding(Kb.Styles.globalMargins.tiny),
 }))
 
 export default SearchBotPopup
diff --git a/shared/chat/conversation/bottom-banner.tsx b/shared/chat/conversation/bottom-banner.tsx
@@ -172,10 +172,9 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       bannerStyle: Kb.Styles.platformStyles({
         common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          ...Kb.Styles.centered(),
           backgroundColor: Kb.Styles.globalColors.red,
           flexWrap: 'wrap',
+          justifyContent: 'center',
           ...Kb.Styles.padding(8, 24),
         },
         isElectron: {

diff --git a/shared/chat/conversation/command-markdown.tsx b/shared/chat/conversation/command-markdown.tsx
@@ -25,19 +25,15 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       bodyContainer: {
-        paddingBottom: Kb.Styles.globalMargins.tiny,
-        paddingLeft: Kb.Styles.globalMargins.xsmall,
-        paddingRight: Kb.Styles.globalMargins.xsmall,
-        paddingTop: Kb.Styles.globalMargins.tiny,
+        ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall),
       },
       container: Kb.Styles.platformStyles({
         isElectron: {
           ...Kb.Styles.desktopStyles.boxShadow,
           border: `1px solid ${Kb.Styles.globalColors.black_20}`,
           borderRadius: Kb.Styles.borderRadius,
           marginBottom: Kb.Styles.globalMargins.xtiny,
-          marginLeft: Kb.Styles.globalMargins.small,
-          marginRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
         },
         isMobile: {
           backgroundColor: Kb.Styles.globalColors.white,
@@ -51,13 +47,8 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       title: {
         backgroundColor: Kb.Styles.globalColors.black_05,
-        borderBottomWidth: 1,
-        borderColor: Kb.Styles.globalColors.black_10,
-        borderStyle: 'solid',
-        paddingBottom: Kb.Styles.globalMargins.tiny,
-        paddingLeft: Kb.Styles.globalMargins.xsmall,
-        paddingRight: Kb.Styles.globalMargins.xsmall,
-        paddingTop: Kb.Styles.globalMargins.tiny,
+        ...Kb.Styles.bottomDivider(),
+        ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall),
       },
     }) as const
 )

diff --git a/shared/chat/conversation/command-status.tsx b/shared/chat/conversation/command-status.tsx
@@ -106,8 +106,7 @@ const styles = Kb.Styles.styleSheetCreate(
           border: `1px solid ${Kb.Styles.globalColors.black_20}`,
           borderRadius: Kb.Styles.borderRadius,
           marginBottom: Kb.Styles.globalMargins.xtiny,
-          marginLeft: Kb.Styles.globalMargins.small,
-          marginRight: Kb.Styles.globalMargins.small,
+          ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
           overflow: 'hidden',
         },
         isMobile: {

diff --git a/shared/chat/conversation/giphy/index.tsx b/shared/chat/conversation/giphy/index.tsx
@@ -162,8 +162,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       outerContainer: {
         marginBottom: Kb.Styles.globalMargins.xtiny,
-        marginLeft: Kb.Styles.globalMargins.small,
-        marginRight: Kb.Styles.globalMargins.small,
+        ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
       },
       poweredBy: {
         bottom: 0,
@@ -176,9 +175,7 @@ const styles = Kb.Styles.styleSheetCreate(
           border: `1px solid ${Kb.Styles.globalColors.black_20}`,
           borderRadius: Kb.Styles.borderRadius,
           maxHeight: 300,
-          paddingBottom: Kb.Styles.globalMargins.tiny,
-          paddingLeft: Kb.Styles.globalMargins.tiny,
-          paddingRight: Kb.Styles.globalMargins.tiny,
+          ...Kb.Styles.padding(0, Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.tiny),
         },
       }),
     }) as const

diff --git a/shared/chat/conversation/header-area/index.tsx b/shared/chat/conversation/header-area/index.tsx
@@ -42,6 +42,7 @@ const HeaderAreaRightImpl = (props: HeaderConversationProps) => {
     <Kb.Box2
       direction="horizontal"
       gap="small"
+      noShrink={true}
       style={Kb.Styles.collapseStyles([styles.headerRight, {opacity: pendingWaiting ? 0 : 1}])}
     >
       <Kb.Icon type="iconfont-search" onClick={onToggleThreadSearch} />
@@ -196,7 +197,7 @@ const ChannelHeader = (props: HeaderConversationProps) => {
 
   return (
     <Kb.Box2 direction="vertical" style={maxWidthStyle}>
-      <Kb.Box2 direction="horizontal" style={styles.channelHeaderContainer}>
+      <Kb.Box2 direction="horizontal" alignItems="center" alignSelf="center" style={styles.channelHeaderContainer}>
         <Kb.Avatar
           teamname={teamname || undefined}
           size={16}
@@ -214,7 +215,7 @@ const ChannelHeader = (props: HeaderConversationProps) => {
         {smallTeam && <ShhIcon conversationIDKey={conversationIDKey} />}
       </Kb.Box2>
       {!smallTeam && (
-        <Kb.Box2 direction="horizontal" style={styles.channelHeaderContainer}>
+        <Kb.Box2 direction="horizontal" alignItems="center" alignSelf="center" style={styles.channelHeaderContainer}>
           <Kb.Text type="BodyBig" style={styles.channelName} lineClamp={1} ellipsizeMode="tail">
             #{channelname}
           </Kb.Text>
@@ -252,7 +253,7 @@ const UsernameHeader = (props: HeaderConversationProps) => {
           {theirFullname}
         </Kb.Text>
       )}
-      <Kb.Box2 direction="horizontal" style={styles.nameMutedContainer} justifyContent="center">
+      <Kb.Box2 direction="horizontal" alignItems="center" justifyContent="center">
         <Kb.ConnectedUsernames
           colorFollowing={true}
           inline={false}
@@ -302,22 +303,15 @@ const styles = Kb.Styles.styleSheetCreate(
         textAlign: 'center',
       },
       channelHeaderContainer: {
-        alignItems: 'center',
-        alignSelf: 'center',
-        paddingLeft: Kb.Styles.globalMargins.tiny,
-        paddingRight: Kb.Styles.globalMargins.tiny,
+        ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
       },
       channelName: {color: Kb.Styles.globalColors.black},
       channelNameLight: {color: Kb.Styles.globalColors.black_50},
       headerRight: {
-        flexShrink: 0,
         height: 22,
         width: 56,
       },
       lessMargins: {marginBottom: -5},
-      nameMutedContainer: {
-        alignItems: 'center',
-      },
       shhIcon: {marginLeft: Kb.Styles.globalMargins.xtiny},
       usernameHeaderContainer: Kb.Styles.centered(),
     }) as const

diff --git a/shared/chat/conversation/info-panel/add-people.tsx b/shared/chat/conversation/info-panel/add-people.tsx
@@ -73,10 +73,8 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       addButtonContainer: {
-        alignSelf: undefined,
         marginBottom: Kb.Styles.globalMargins.small,
-        marginLeft: Kb.Styles.globalMargins.small,
-        marginRight: Kb.Styles.globalMargins.small,
+        ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
       },
     }) as const
 )

diff --git a/shared/chat/conversation/info-panel/add-to-channel.tsx b/shared/chat/conversation/info-panel/add-to-channel.tsx
@@ -172,10 +172,8 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   filterInput: Kb.Styles.platformStyles({
     isElectron: {
-      marginBottom: Kb.Styles.globalMargins.tiny,
-      marginLeft: Kb.Styles.globalMargins.small,
-      marginRight: Kb.Styles.globalMargins.small,
-      marginTop: Kb.Styles.globalMargins.tiny,
+      ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
+      ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny),
     },
   }),
   list: Kb.Styles.platformStyles({isMobile: {height: '100%'}}),

diff --git a/shared/chat/conversation/info-panel/attachments.tsx b/shared/chat/conversation/info-panel/attachments.tsx
@@ -208,7 +208,7 @@ const MediaThumb = (props: MediaThumbProps) => {
         )}
       </Kb.ClickableBox>
       {thumb.typ === ThumbTyp.VIDEO && (
-        <Kb.Box2 direction="vertical" style={styles.durationContainer}>
+        <Kb.Box2 direction="vertical" alignSelf="flex-start" style={styles.durationContainer}>
           <Kb.ImageIcon type="icon-film-64" style={styles.filmIcon} />
         </Kb.Box2>
       )}
@@ -360,15 +360,11 @@ const styles = Kb.Styles.styleSheetCreate(
         } as const,
       }),
       durationContainer: {
-        alignSelf: 'flex-start',
         bottom: Kb.Styles.globalMargins.xtiny,
         position: 'absolute',
         right: Kb.Styles.globalMargins.xtiny,
       },
-      filmIcon: {
-        height: 16,
-        width: 16,
-      },
+      filmIcon: Kb.Styles.size(16),
       flexWrap: {flexWrap: 'wrap'},
       linkContainer: {padding: Kb.Styles.globalMargins.tiny},
       linkStyle: Kb.Styles.platformStyles({

diff --git a/shared/chat/conversation/info-panel/bot.tsx b/shared/chat/conversation/info-panel/bot.tsx
@@ -182,17 +182,13 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       addBot: {
-        alignSelf: undefined,
         marginBottom: Kb.Styles.globalMargins.xtiny,
-        marginLeft: Kb.Styles.globalMargins.small,
-        marginRight: Kb.Styles.globalMargins.small,
+        ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
         marginTop: Kb.Styles.globalMargins.small,
       },
       botHeaders: {
-        marginBottom: Kb.Styles.globalMargins.tiny,
-        marginLeft: Kb.Styles.globalMargins.small,
-        marginRight: Kb.Styles.globalMargins.small,
-        marginTop: Kb.Styles.globalMargins.tiny,
+        ...Kb.Styles.marginH(Kb.Styles.globalMargins.small),
+        ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny),
       },
       container: Kb.Styles.platformStyles({
         isElectron: {