react-native-inapp-inspector 2.3.7 → 2.3.9

package/dist/esm/components/Inspector/InspectorHeader.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Alert, Animated, Linking, Platform, Pressable, Text, View, } from 'react-native';
+import { Alert, Animated, Linking, Platform, Pressable, ScrollView, Text, useWindowDimensions, View, } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
@@ -15,6 +15,10 @@ import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
+    const { width: windowWidth } = useWindowDimensions();
+    const isNarrow = windowWidth < 360;
+    const isCompact = windowWidth < 400;
+    const isTablet = windowWidth >= 600;
     const [showUpdateModal, setShowUpdateModal] = React.useState(false);
     const [appVersionString, setAppVersionString] = React.useState(() => {
         return getAppVersionAndBuild().formatted;
@@ -93,16 +97,25 @@ const InspectorHeader = React.memo(() => {
         }
     }, [settingsPage]);
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
+    const buttonSize = isNarrow ? 28 : isCompact ? 30 : 32;
+    const logoSize = isNarrow ? 36 : isCompact ? 40 : 44;
     return (<>
       <LinearGradient colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.headerGradient}>
       <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-        <View style={styles.header}>
+        <View style={[
+            styles.header,
+            {
+                paddingHorizontal: isNarrow ? 8 : 12,
+                paddingVertical: isNarrow ? 6 : 8,
+                minHeight: isNarrow ? 48 : 52,
+            },
+        ]}>
           <View style={[
             styles.headerLeft,
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 8,
+                gap: isNarrow ? 6 : 8,
                 flex: !isDetailView ? 1 : 0,
                 minWidth: 0,
             },
@@ -127,9 +140,9 @@ const InspectorHeader = React.memo(() => {
             });
         }} hitSlop={15} style={[
             {
-                width: 38,
-                height: 38,
-                borderRadius: 19,
+                width: isNarrow ? 32 : 36,
+                height: isNarrow ? 32 : 36,
+                borderRadius: isNarrow ? 16 : 18,
                 alignItems: 'center',
                 justifyContent: 'center',
                 backgroundColor: `${AppColors.white}2E`,
@@ -138,12 +151,11 @@ const InspectorHeader = React.memo(() => {
             },
             !isAnySelected && { display: 'none' },
         ]}>
-              
               <View style={{
             position: 'absolute',
-            width: 48,
-            height: 48,
-            borderRadius: 24,
+            width: isNarrow ? 40 : 44,
+            height: isNarrow ? 40 : 44,
+            borderRadius: 22,
             backgroundColor: `${AppColors.white}1A`,
         }}/>
               <WhiteBackNavigation />
@@ -153,7 +165,7 @@ const InspectorHeader = React.memo(() => {
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <Text style={{
                 fontFamily: AppFonts.interBold,
-                fontSize: 16,
+                fontSize: isNarrow ? 14 : 16,
                 color: AppColors.white,
                 letterSpacing: -0.2,
             }} numberOfLines={1}>
@@ -161,7 +173,7 @@ const InspectorHeader = React.memo(() => {
                   </Text>
                   {settingsPage === 'main' && (<View style={{
                     backgroundColor: `${AppColors.white}26`,
-                    paddingHorizontal: 6,
+                    paddingHorizontal: isNarrow ? 4 : 6,
                     paddingVertical: 1.5,
                     borderRadius: 10,
                     borderWidth: 1,
@@ -169,7 +181,7 @@ const InspectorHeader = React.memo(() => {
                 }}>
                       <Text style={{
                     fontFamily: AppFonts.interBold,
-                    fontSize: 9,
+                    fontSize: isNarrow ? 8 : 9,
                     color: AppColors.white,
                 }}>
                         v{LIB_VERSION}
@@ -178,7 +190,7 @@ const InspectorHeader = React.memo(() => {
                 </View>
                 <Text style={{
                 fontFamily: AppFonts.interRegular,
-                fontSize: 10.5,
+                fontSize: isNarrow ? 9.5 : 10.5,
                 color: `${AppColors.white}CC`,
             }} numberOfLines={1}>
                   {settingsPage === 'main'
@@ -188,20 +200,27 @@ const InspectorHeader = React.memo(() => {
               </View>) : !isAnySelected ? (<View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 8,
+                gap: isNarrow ? 6 : 8,
                 flex: 1,
                 minWidth: 0,
-                marginRight: 6,
+                marginRight: 4,
             }}>
-                <AppHeaderLogo size={46} customIcon={appIcon}/>
-                <View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
+                <AppHeaderLogo size={logoSize} customIcon={appIcon}/>
+                <View style={{ gap: 2, flex: 1, minWidth: 0 }}>
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 6,
+                gap: isNarrow ? 4 : 6,
                 minWidth: 0,
             }}>
-                    <Text style={[styles.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
+                    <Text style={[
+                styles.headerTitle,
+                {
+                    fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
+                    flexShrink: 1,
+                    paddingBottom: 0,
+                },
+            ]} numberOfLines={1} ellipsizeMode="tail">
                       {getAppName()}
                     </Text>
                     <View style={[
@@ -210,11 +229,18 @@ const InspectorHeader = React.memo(() => {
                     backgroundColor: envConfig.bg,
                     borderColor: envConfig.border,
                     flexShrink: 0,
+                    paddingHorizontal: isNarrow ? 4.5 : 6,
                     paddingVertical: 1.5,
                     marginBottom: 0,
                 },
             ]}>
-                      <Text style={[styles.envBadgeText, { color: envConfig.text }]}>
+                      <Text style={[
+                styles.envBadgeText,
+                {
+                    color: envConfig.text,
+                    fontSize: isNarrow ? 8.5 : 9.5,
+                },
+            ]}>
                         {envConfig.label}
                       </Text>
                     </View>
@@ -223,9 +249,9 @@ const InspectorHeader = React.memo(() => {
                     alignItems: 'center',
                     backgroundColor: '#F59E0B',
                     borderRadius: 5,
-                    paddingHorizontal: 5.5,
+                    paddingHorizontal: isNarrow ? 4 : 5.5,
                     paddingVertical: 1.5,
-                    gap: 3.5,
+                    gap: 3,
                     shadowColor: '#F59E0B',
                     shadowOffset: { width: 0, height: 1.5 },
                     shadowOpacity: 0.35,
@@ -241,15 +267,15 @@ const InspectorHeader = React.memo(() => {
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
-                        <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: '#FFFFFF',
-                    letterSpacing: 0.3,
-                }}>
-                          UPDATE
-                        </Text>
-                        <BoltIcon size={9} color="#FFFFFF"/>
+                        {!isNarrow && (<Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 8.5,
+                        color: '#FFFFFF',
+                        letterSpacing: 0.3,
+                    }}>
+                            UPDATE
+                          </Text>)}
+                        <BoltIcon size={isNarrow ? 8 : 9} color="#FFFFFF"/>
                       </Pressable>)}
                   </View>
 
@@ -257,7 +283,7 @@ const InspectorHeader = React.memo(() => {
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 5,
+                gap: isNarrow ? 4 : 5,
                 minWidth: 0,
             }}>
                     <View style={{
@@ -265,20 +291,21 @@ const InspectorHeader = React.memo(() => {
                 alignItems: 'center',
                 backgroundColor: `${AppColors.white}1F`,
                 borderRadius: 5,
-                paddingHorizontal: 6,
+                paddingHorizontal: isNarrow ? 4.5 : 6,
                 paddingVertical: 2,
-                gap: 4,
+                gap: 3.5,
                 borderWidth: 1,
                 borderColor: `${AppColors.white}2E`,
-                flexShrink: 0,
+                flexShrink: 1,
+                minWidth: 0,
             }}>
-                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={10}/>)}
+                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
                       <Text style={{
                 fontFamily: AppFonts.interMedium,
-                fontSize: 9.5,
+                fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
-            }} numberOfLines={1}>
+            }} numberOfLines={1} ellipsizeMode="tail">
                         {appVersionString}
                       </Text>
                     </View>
@@ -295,17 +322,17 @@ const InspectorHeader = React.memo(() => {
                 alignItems: 'center',
                 backgroundColor: `${AppColors.white}1F`,
                 borderRadius: 5,
-                paddingHorizontal: 6,
+                paddingHorizontal: isNarrow ? 4.5 : 6,
                 paddingVertical: 2,
-                gap: 4,
+                gap: 3.5,
                 borderWidth: 1,
                 borderColor: `${AppColors.white}2E`,
                 flexShrink: 0,
             }}>
-                      <NpmIcon size={10} color="#FF6B6B"/>
+                      <NpmIcon size={isNarrow ? 9 : 10} color="#FF6B6B"/>
                       <Text style={{
                 fontFamily: AppFonts.interMedium,
-                fontSize: 9.5,
+                fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
@@ -313,7 +340,7 @@ const InspectorHeader = React.memo(() => {
                       </Text>
                       {updateAvailable && (<Text style={{
                     fontFamily: AppFonts.interBold,
-                    fontSize: 9,
+                    fontSize: 8.5,
                     color: '#F59E0B',
                 }}>
                           ●
@@ -324,7 +351,7 @@ const InspectorHeader = React.memo(() => {
               </View>) : null}
           </View>
 
-          {isDetailView && (<View style={styles.headerCenter}>
+          {isDetailView && (<View style={[styles.headerCenter, { paddingHorizontal: isNarrow ? 2 : 6 }]}>
               {activeTab === 'apis' && selected != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
@@ -332,23 +359,31 @@ const InspectorHeader = React.memo(() => {
                     {
                         backgroundColor: METHOD_COLORS[selected.method] ??
                             AppColors.grayText,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>
+                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selected.method}
                       </Text>
                     </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {detailTitle}
                     </Text>
                   </View>
-                  <View style={styles.headerDetailSubRow}>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
+                    gap: 4,
+                    paddingHorizontal: isNarrow ? 6 : 8,
+                    paddingVertical: 2.5,
                     borderRadius: 20,
                     backgroundColor: `${getStatusColor(selected.status)}26`,
                     borderWidth: 1,
@@ -358,11 +393,13 @@ const InspectorHeader = React.memo(() => {
                     styles.headerStatusDot,
                     {
                         backgroundColor: getStatusColor(selected.status),
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
                     },
                 ]}/>
                       <Text style={[
                     styles.headerSubTitle,
-                    { fontFamily: AppFonts.interBold },
+                    { fontFamily: AppFonts.interBold, fontSize: isNarrow ? 10 : 11 },
                 ]}>
                         {selected.status === 0
                     ? 'Failed'
@@ -373,13 +410,13 @@ const InspectorHeader = React.memo(() => {
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
+                    paddingHorizontal: isNarrow ? 6 : 8,
+                    paddingVertical: 2.5,
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                      <ClockIcon color={AppColors.white} size={11}/>
-                      <Text style={styles.headerSubTitle}>
+                      <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
+                      <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                         {selected.duration != null
                     ? `${selected.duration}ms`
                     : '—'}
@@ -389,17 +426,17 @@ const InspectorHeader = React.memo(() => {
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 4,
-                        paddingHorizontal: 8,
-                        paddingVertical: 3,
+                        paddingHorizontal: isNarrow ? 6 : 8,
+                        paddingVertical: 2.5,
                         borderRadius: 20,
                         backgroundColor: `${AppColors.white}29`,
                     }}>
-                        <SizeIcon color={AppColors.white} size={11}/>
-                        <Text style={styles.headerSubTitle}>
+                        <SizeIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
+                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                           {getSize(selected.response)}
                         </Text>
                       </View>)}
-                  </View>
+                  </ScrollView>
                 </View>) : activeTab === 'analytics' && selectedEvent != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
@@ -408,26 +445,36 @@ const InspectorHeader = React.memo(() => {
                         backgroundColor: selectedEvent.source === 'firebase'
                             ? `${AppColors.firebaseOrange}4D`
                             : `${AppColors.purple}4D`,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>
+                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
                       </Text>
                     </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {selectedEvent.name}
                     </Text>
                   </View>
-                  <View style={styles.headerDetailSubRow}>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
                             ? AppColors.firebaseOrange
                             : AppColors.purple,
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <Text style={styles.headerSubTitle}>
+                    <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                       {Object.keys(selectedEvent.params).length} param
                       {Object.keys(selectedEvent.params).length !== 1
                     ? 's'
@@ -435,7 +482,7 @@ const InspectorHeader = React.memo(() => {
                       {' · '}
                       {selectedEvent.source}
                     </Text>
-                  </View>
+                  </ScrollView>
                 </View>) : activeTab === 'logs' && selectedLog != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
@@ -446,33 +493,41 @@ const InspectorHeader = React.memo(() => {
                             : selectedLog.type === 'warn'
                                 ? `${AppColors.lightOrange}4D`
                                 : `${AppColors.purple}4D`,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>
+                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selectedLog.type.toUpperCase()}
                       </Text>
                     </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       console.
                       {selectedLog.sourceMethod || selectedLog.type || 'log'}
                     </Text>
                   </View>
-                  <View style={styles.headerDetailSubRow}>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
+                    paddingHorizontal: isNarrow ? 6 : 8,
+                    paddingVertical: 2.5,
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                      <ClockIcon color={AppColors.white} size={11}/>
-                      <Text style={styles.headerSubTitle}>
+                      <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11}/>
+                      <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                         {formatTime(selectedLog.timestamp)}
                       </Text>
                     </View>
-                  </View>
+                  </ScrollView>
                 </View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
                 const sliceData = reduxState?.[selectedReduxSlice];
                 const keyCount = sliceData && typeof sliceData === 'object'
@@ -488,32 +543,44 @@ const InspectorHeader = React.memo(() => {
                         styles.headerMethodBadge,
                         {
                             backgroundColor: `${AppColors.purple}4D`,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
                         },
                     ]}>
-                          <Text style={styles.headerMethodText}>SLICE</Text>
+                          <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>SLICE</Text>
                         </View>
-                        <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                        <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                           {selectedReduxSlice}
                         </Text>
                       </View>
-                      <View style={styles.headerDetailSubRow}>
+                      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
+                    }}>
                         <View style={[
                         styles.headerStatusDot,
-                        { backgroundColor: AppColors.liveGreen },
+                        {
+                            backgroundColor: AppColors.liveGreen,
+                            width: isNarrow ? 6 : 7,
+                            height: isNarrow ? 6 : 7,
+                        },
                     ]}/>
-                        <Text style={styles.headerSubTitle}>Live</Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>Live</Text>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                           •
                         </Text>
-                        <Text style={styles.headerSubTitle}>
+                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                           {keyCount} keys
                         </Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                           •
                         </Text>
-                        <Text style={styles.headerSubTitle}>{sliceSize}</Text>
+                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>{sliceSize}</Text>
                         {lastAction?.timestamp && (<>
-                            <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                            <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                               •
                             </Text>
                             <View style={{
@@ -521,13 +588,13 @@ const InspectorHeader = React.memo(() => {
                             alignItems: 'center',
                             gap: 3,
                         }}>
-                              <ClockIcon color={AppColors.white} size={10}/>
-                              <Text style={styles.headerSubTitle}>
+                              <ClockIcon color={AppColors.white} size={isNarrow ? 9 : 10}/>
+                              <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                                 {lastAction.timestamp}
                               </Text>
                             </View>
                           </>)}
-                      </View>
+                      </ScrollView>
                     </View>);
             })()) : activeTab === 'redux' && selectedReduxAction != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
@@ -535,23 +602,35 @@ const InspectorHeader = React.memo(() => {
                     styles.headerMethodBadge,
                     {
                         backgroundColor: `${AppColors.brandPurple}4D`,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>ACTION</Text>
+                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>ACTION</Text>
                     </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {selectedReduxAction.type}
                     </Text>
                   </View>
-                  <View style={styles.headerDetailSubRow}>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <View style={[
                     styles.headerStatusDot,
-                    { backgroundColor: AppColors.purple },
+                    {
+                        backgroundColor: AppColors.purple,
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
+                    },
                 ]}/>
-                    <Text style={styles.headerSubTitle}>
+                    <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                       {selectedReduxAction.timestamp || 'Dispatched'}
                     </Text>
-                  </View>
+                  </ScrollView>
                 </View>) : activeTab === 'crash' && selectedCrash != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
@@ -560,40 +639,50 @@ const InspectorHeader = React.memo(() => {
                         backgroundColor: selectedCrash.isFatal
                             ? AppColors.red600
                             : AppColors.amber600,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>
+                      <Text style={[styles.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selectedCrash.isFatal
                     ? 'FATAL'
                     : selectedCrash.type.toUpperCase()}
                       </Text>
                     </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <Text style={[styles.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {selectedCrash.name || selectedCrash.message}
                     </Text>
                   </View>
-                  <View style={styles.headerDetailSubRow}>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <View style={[
                     styles.headerStatusDot,
                     {
                         backgroundColor: selectedCrash.isFatal
                             ? AppColors.red600
                             : AppColors.amber500,
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <Text style={styles.headerSubTitle}>
+                    <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                       {selectedCrash.timeStr ||
                     new Date(selectedCrash.timestamp).toLocaleTimeString()}
                     </Text>
                     {selectedCrash.deviceInfo?.platform && (<>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                           •
                         </Text>
-                        <Text style={styles.headerSubTitle}>
+                        <Text style={[styles.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                           {selectedCrash.deviceInfo.platform.toUpperCase()}
                         </Text>
                       </>)}
-                  </View>
+                  </ScrollView>
                 </View>) : null}
             </View>)}
 
@@ -604,7 +693,7 @@ const InspectorHeader = React.memo(() => {
                 alignItems: 'center',
                 justifyContent: 'flex-end',
                 flexShrink: 0,
-                gap: 8,
+                gap: isNarrow ? 5 : 7,
             },
         ]}>
             {isSettingsView && (<TouchableScale onPress={() => {
@@ -616,8 +705,15 @@ const InspectorHeader = React.memo(() => {
                         onPress: resetToDefaults,
                     },
                 ]);
-            }} hitSlop={15} style={styles.closeButtonSquare}>
-                <ResetIcon color={AppColors.white} size={14}/>
+            }} hitSlop={15} style={[
+                styles.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
+                <ResetIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale>)}
 
             {!isAnySelected && (<TouchableScale onPress={() => {
@@ -629,7 +725,14 @@ const InspectorHeader = React.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} hitSlop={15} style={styles.closeButtonSquare}>
+            }} hitSlop={15} style={[
+                styles.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
                 <Animated.View style={{
                 transform: [
                     {
@@ -646,16 +749,30 @@ const InspectorHeader = React.memo(() => {
                     },
                 ],
             }}>
-                  <TrashIcon color={AppColors.white} size={14}/>
+                  <TrashIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
                 </Animated.View>
               </TouchableScale>)}
 
-            {!isAnySelected && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={styles.closeButtonSquare}>
-                <SettingsIcon color={AppColors.white} size={14}/>
+            {!isAnySelected && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+                styles.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
+                <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale>)}
 
-            <TouchableScale onPress={closeModal} hitSlop={15} style={styles.closeButtonSquare}>
-              <CloseWhite size={14}/>
+            <TouchableScale onPress={closeModal} hitSlop={15} style={[
+            styles.closeButtonSquare,
+            {
+                width: buttonSize,
+                height: buttonSize,
+                borderRadius: isNarrow ? 6 : 7,
+            },
+        ]}>
+              <CloseWhite size={isNarrow ? 12 : 14}/>
             </TouchableScale>
           </View>
         </View>