keybase · chrisnojima · May 30, 2026 · May 29, 2026 · May 29, 2026 · May 29, 2026
diff --git a/plans/clickablebox3.md b/plans/clickablebox3.md
diff --git a/shared/chat/audio/audio-player.tsx b/shared/chat/audio/audio-player.tsx
@@ -98,14 +98,14 @@ const AudioPlayer = (props: Props) => {
       style={Kb.Styles.collapseStyles([styles.container, {height: big ? 56 : 40}])}
       gap="tiny"
     >
-      <Kb.ClickableBox onClick={url ? onClick : undefined} style={{justifyContent: 'center'}}>
+      <Kb.ClickableBox3 direction="vertical" justifyContent="center" onClick={url ? onClick : undefined}>
         <Kb.Icon
           type={!paused ? 'iconfont-pause' : 'iconfont-play'}
           fontSize={32}
           color={url ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.grey}
         />
-      </Kb.ClickableBox>
-      <Kb.Box2 direction="vertical" style={styles.visContainer} gap="xxtiny" fullHeight={true} justifyContent="flex-end">
+      </Kb.ClickableBox3>
+      <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.visContainer} gap="xxtiny" fullHeight={true} justifyContent="flex-end">
         <AudioVis height={big ? 32 : 18} amps={visAmps} maxWidth={maxWidth} playedRatio={playedRatio} />
         <Kb.Text type="BodyTiny">{formatAudioRecordDuration(timeLeft)}</Kb.Text>
       </Kb.Box2>
@@ -123,7 +123,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     backgroundColor: Kb.Styles.globalColors.white,
   },
   visContainer: {
-    alignItems: 'flex-start',
     minWidth: 40,
   },
 }))

diff --git a/shared/chat/avatars.tsx b/shared/chat/avatars.tsx
@@ -82,10 +82,8 @@ const Avatars = function Avatars(p: Props) {
   if (!participantTwo) {
     return (
       <Kb.Box2 direction="vertical" relative={true} style={containerStyle}>
-        <Kb.Box2 direction="vertical" relative={true}>
-          <Kb.Avatar username={participantOne} size={singleSize} style={{opacity}} />
-          <OverlayIcon isHovered={isHovered} isSelected={isSelected} isMuted={isMuted} isLocked={isLocked} />
-        </Kb.Box2>
+        <Kb.Avatar username={participantOne} size={singleSize} style={{opacity}} />
+        <OverlayIcon isHovered={isHovered} isSelected={isSelected} isMuted={isMuted} isLocked={isLocked} />
       </Kb.Box2>
     )
   }

diff --git a/shared/chat/blocking/block-modal.tsx b/shared/chat/blocking/block-modal.tsx
@@ -127,7 +127,7 @@ const ReportOptions = (props: ReportOptionsProps) => {
   )
 }
 
-const Container = function BlockModal(ownProps: OwnProps) {
+const BlockModal = (ownProps: OwnProps) => {
   const {context, conversationIDKey, blockUserByDefault = false, filterUserByDefault = false} = ownProps
   const {flagUserByDefault = false, reportsUserByDefault = false, team: teamname} = ownProps
   let {username: adderUsername, others} = ownProps
@@ -496,7 +496,7 @@ const Container = function BlockModal(ownProps: OwnProps) {
   )
 }
 
-export default Container
+export default BlockModal
 
 const getListHeightStyle = (numOthers: number, expanded: boolean) => ({
   height:

diff --git a/shared/chat/blocking/invitation-to-block.tsx b/shared/chat/blocking/invitation-to-block.tsx
@@ -141,7 +141,7 @@ const BlockButtons = () => {
       </Kb.Box2>
     </Kb.Box2>
   ) : (
-    <Kb.Box2 direction="horizontal" gap="xsmall" style={styles.container} centerChildren={false}>
+    <Kb.Box2 direction="horizontal" gap="xsmall" alignItems="center" style={styles.container}>
       <Kb.Text type="BodySmall">
         {team ? `${adder} added you to this team.` : `You don't follow ${adder}.`}
       </Kb.Text>
@@ -166,7 +166,6 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       buttonContainer: {maxWidth: 322},
       container: {
-        alignItems: 'center',
         alignSelf: 'flex-start',
         marginLeft: 57,
       },

diff --git a/shared/chat/conversation/attachment-fullscreen/index.tsx b/shared/chat/conversation/attachment-fullscreen/index.tsx
@@ -31,12 +31,14 @@ type ArrowProps = {
 const Arrow = (props: ArrowProps) => {
   const {left, onClick} = props
   return (
-    <Kb.ClickableBox
+    <Kb.ClickableBox3
+      direction="vertical"
+      centerChildren={true}
       className="hover_background_color_black background_color_black_50 fade-background-color"
       onClick={
         onClick
           ? e => {
-              e.stopPropagation()
+              e?.stopPropagation()
               onClick()
             }
           : undefined
@@ -48,7 +50,7 @@ const Arrow = (props: ArrowProps) => {
         color={Kb.Styles.globalColors.white}
         style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])}
       />
-    </Kb.ClickableBox>
+    </Kb.ClickableBox3>
   )
 }
 
@@ -64,7 +66,9 @@ const DesktopFullscreen = (p: Props) => {
 
   const preload = (src: string, onLoad: () => void, onError: () => void) => {
     // Use dynamic require to avoid DOM type dependency
-    const ctor = (globalThis as unknown as {Image?: new () => {src: string; onload: () => void; onerror: () => void}}).Image
+    const ctor = (
+      globalThis as unknown as {Image?: new () => {src: string; onload: () => void; onerror: () => void}}
+    ).Image
     if (!ctor) return
     const img = new ctor()
     img.src = src
@@ -114,7 +118,7 @@ const DesktopFullscreen = (p: Props) => {
       </Kb.Box2>
       {path && (
         <Kb.BoxGrow>
-          <Kb.ClickableBox style={styles.contentsFit} key={path}>
+          <Kb.Box2 direction="horizontal" flex={1} fullWidth={true} fullHeight={true} key={path}>
             {!isZoomed ? <Arrow left={true} onClick={onPreviousAttachment} /> : undefined}
             <Kb.Box2
               direction="vertical"
@@ -142,7 +146,7 @@ const DesktopFullscreen = (p: Props) => {
               )}
             </Kb.Box2>
             {!isZoomed && <Arrow left={false} onClick={onNextAttachment} />}
-          </Kb.ClickableBox>
+          </Kb.Box2>
         </Kb.BoxGrow>
       )}
       <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
@@ -413,11 +417,8 @@ const styles = Kb.Styles.styleSheetCreate(
       arrowRight: {left: 1},
       circle: Kb.Styles.platformStyles({
         isElectron: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          ...Kb.Styles.centered(),
           alignSelf: 'center',
           borderRadius: 36,
-          cursor: 'pointer',
           flexShrink: 0,
           ...Kb.Styles.size(36),
           margin: Kb.Styles.globalMargins.small,
@@ -429,11 +430,6 @@ const styles = Kb.Styles.styleSheetCreate(
           padding: Kb.Styles.globalMargins.small,
         },
       }),
-      contentsFit: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        flex: 1,
-        ...Kb.Styles.size('100%'),
-      },
       disabled: {opacity: 0.3},
       ellipsisContainer: Kb.Styles.platformStyles({
         isElectron: Kb.Styles.desktopStyles.windowDraggingClickable,

diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx
@@ -198,38 +198,36 @@ const ContainerInner = (ownProps: OwnProps) => {
   return (
     <>
       <Kb.Box2 alignItems="center" direction="vertical" fullWidth={true} style={styles.container}>
-        <Kb.ClickableBox2 style={styles.container2} onClick={() => inputRef.current?.blur()}>
-          <Kb.Box2 direction="vertical" style={styles.containerOuter} fullWidth={true}>
-            <Kb.BoxGrow style={styles.boxGrow}>{preview}</Kb.BoxGrow>
-            {pathAndInfos.length > 0 && !isMobile && (
-              <Kb.Box2 direction="vertical" style={styles.filename}>
-                <Kb.Text type="BodySmallSemibold">Filename</Kb.Text>
-                <Kb.Text type="BodySmall" center={true}>
-                  {info.filename} ({index + 1} of {pathAndInfos.length})
-                </Kb.Text>
-              </Kb.Box2>
-            )}
-            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.inputContainer}>
-              <Kb.Input3
-                ref={inputRef}
-                autoFocus={!isMobile}
-                onClick={(e: React.BaseSyntheticEvent) => {
-                  e.stopPropagation()
-                }}
-                autoCorrect={true}
-                placeholder={titleHint}
-                multiline={true}
-                rowsMin={2}
-                value={titles[index]}
-                onEnterKeyDown={onNext}
-                onChangeText={updateTitle}
-                hideBorder={true}
-                containerStyle={styles.inputBare}
-                inputStyle={styles.input}
-              />
+        <Kb.ClickableBox3 direction="vertical" fullWidth={true} alignItems="center" style={styles.container2} onClick={() => inputRef.current?.blur()}>
+          <Kb.BoxGrow style={styles.boxGrow}>{preview}</Kb.BoxGrow>
+          {pathAndInfos.length > 0 && !isMobile && (
+            <Kb.Box2 direction="vertical" style={styles.filename}>
+              <Kb.Text type="BodySmallSemibold">Filename</Kb.Text>
+              <Kb.Text type="BodySmall" center={true}>
+                {info.filename} ({index + 1} of {pathAndInfos.length})
+              </Kb.Text>
             </Kb.Box2>
+          )}
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.inputContainer}>
+            <Kb.Input3
+              ref={inputRef}
+              autoFocus={!isMobile}
+              onClick={(e: React.BaseSyntheticEvent) => {
+                e.stopPropagation()
+              }}
+              autoCorrect={true}
+              placeholder={titleHint}
+              multiline={true}
+              rowsMin={2}
+              value={titles[index]}
+              onEnterKeyDown={onNext}
+              onChangeText={updateTitle}
+              hideBorder={true}
+              containerStyle={styles.inputBare}
+              inputStyle={styles.input}
+            />
           </Kb.Box2>
-        </Kb.ClickableBox2>
+        </Kb.ClickableBox3>
         <Kb.ButtonBar fullWidth={true} small={true} style={styles.buttonContainer}>
           {!isMobile && <Kb.Button fullWidth={true} type="Dim" onClick={onCancel} label="Cancel" />}
           {isLast ? (
@@ -273,16 +271,9 @@ const styles = Kb.Styles.styleSheetCreate(
         isMobile: {flexShrink: 1},
       }),
       container2: Kb.Styles.platformStyles({
-        common: {
-          alignItems: 'center',
-          flexGrow: 1,
-          width: '100%',
-        },
-        isMobile: {flexShrink: 1},
-      }),
-      containerOuter: Kb.Styles.platformStyles({
+        common: {flexGrow: 1},
         isElectron: {height: '100%', overflow: 'hidden'},
-        isMobile: {flexGrow: 1, flexShrink: 1},
+        isMobile: {flexShrink: 1, flexGrow: 1},
       }),
       filename: Kb.Styles.platformStyles({
         isElectron: {
@@ -323,8 +314,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-const Container = (ownProps: OwnProps) => {
-  return <ContainerInner {...ownProps} />
-}
-
-export default Container
+export default ContainerInner
diff --git a/shared/chat/conversation/bot/team-picker.tsx b/shared/chat/conversation/bot/team-picker.tsx
@@ -44,18 +44,16 @@ const BotTeamPicker = (props: Props) => {
   }
   const renderResult = (index: number, item: T.RPCChat.ConvSearchHit) => {
     return (
-      <Kb.ClickableBox key={index} onClick={() => onSelect(item.convID)}>
-        <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}>
-          {item.isTeam ? (
-            <TeamAvatar isHovered={false} isMuted={false} isSelected={false} teamname={item.name} />
-          ) : (
-            <Avatars participantOne={item.parts?.[0]} participantTwo={item.parts?.[1]} />
-          )}
-          <Kb.Text type="Body" style={{alignSelf: 'center'}}>
-            {item.name}
-          </Kb.Text>
-        </Kb.Box2>
-      </Kb.ClickableBox>
+      <Kb.ClickableBox3 key={index} onClick={() => onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}>
+        {item.isTeam ? (
+          <TeamAvatar isHovered={false} isMuted={false} isSelected={false} teamname={item.name} />
+        ) : (
+          <Avatars participantOne={item.parts?.[0]} participantTwo={item.parts?.[1]} />
+        )}
+        <Kb.Text type="Body" style={{alignSelf: 'center'}}>
+          {item.name}
+        </Kb.Text>
+      </Kb.ClickableBox3>
     )
   }
   return (

diff --git a/shared/chat/conversation/error.tsx b/shared/chat/conversation/error.tsx
@@ -4,11 +4,9 @@ import {useConversationThreadSelector} from './thread-context'
 const ConversationError = () => {
   const text = useConversationThreadSelector(s => s.meta.snippet) ?? ''
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container} gap="small">
+    <Kb.Box2 direction="vertical" fullWidth={true} padding="medium" gap="small">
       <Kb.Text type="Header">There was an error loading this conversation.</Kb.Text>
-      <Kb.Text type="Body">
-        The error is:
-      </Kb.Text>
+      <Kb.Text type="Body">The error is:</Kb.Text>
       <Kb.Box2 direction="horizontal" fullWidth={true}>
         <Kb.CopyableText style={styles.errorText} value={text} />
       </Kb.Box2>
@@ -19,9 +17,6 @@ const ConversationError = () => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      container: {
-        padding: Kb.Styles.globalMargins.medium,
-      },
       errorText: {flexGrow: 1},
     }) as const
 )