react-native-inapp-inspector 2.3.8 → 2.3.10

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

@@ -53,6 +53,10 @@ const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.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, } = (0, InspectorContext_1.useInspector)();
+    const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
+    const isNarrow = windowWidth < 360;
+    const isCompact = windowWidth < 400;
+    const isTablet = windowWidth >= 600;
     const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
     const [appVersionString, setAppVersionString] = react_1.default.useState(() => {
         return (0, helpers_1.getAppVersionAndBuild)().formatted;
@@ -131,16 +135,25 @@ const InspectorHeader = react_1.default.memo(() => {
         }
     }, [settingsPage]);
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
+    const buttonSize = isNarrow ? 28 : isCompact ? 30 : 32;
+    const logoSize = isNarrow ? 36 : isCompact ? 40 : 44;
     return (<>
       <react_native_linear_gradient_1.default colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles_1.default.headerGradient}>
       <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-        <react_native_1.View style={styles_1.default.header}>
+        <react_native_1.View style={[
+            styles_1.default.header,
+            {
+                paddingHorizontal: isNarrow ? 8 : 12,
+                paddingVertical: isNarrow ? 6 : 8,
+                minHeight: isNarrow ? 48 : 52,
+            },
+        ]}>
           <react_native_1.View style={[
             styles_1.default.headerLeft,
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 8,
+                gap: isNarrow ? 6 : 8,
                 flex: !isDetailView ? 1 : 0,
                 minWidth: 0,
             },
@@ -165,9 +178,9 @@ const InspectorHeader = react_1.default.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_1.AppColors.white}2E`,
@@ -176,12 +189,11 @@ const InspectorHeader = react_1.default.memo(() => {
             },
             !isAnySelected && { display: 'none' },
         ]}>
-              
               <react_native_1.View style={{
             position: 'absolute',
-            width: 48,
-            height: 48,
-            borderRadius: 24,
+            width: isNarrow ? 40 : 44,
+            height: isNarrow ? 40 : 44,
+            borderRadius: 22,
             backgroundColor: `${AppColors_1.AppColors.white}1A`,
         }}/>
               <NetworkIcons_1.WhiteBackNavigation />
@@ -191,7 +203,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 16,
+                fontSize: isNarrow ? 14 : 16,
                 color: AppColors_1.AppColors.white,
                 letterSpacing: -0.2,
             }} numberOfLines={1}>
@@ -199,7 +211,7 @@ const InspectorHeader = react_1.default.memo(() => {
                   </react_native_1.Text>
                   {settingsPage === 'main' && (<react_native_1.View style={{
                     backgroundColor: `${AppColors_1.AppColors.white}26`,
-                    paddingHorizontal: 6,
+                    paddingHorizontal: isNarrow ? 4 : 6,
                     paddingVertical: 1.5,
                     borderRadius: 10,
                     borderWidth: 1,
@@ -207,7 +219,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 }}>
                       <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
+                    fontSize: isNarrow ? 8 : 9,
                     color: AppColors_1.AppColors.white,
                 }}>
                         v{constants_2.LIB_VERSION}
@@ -216,7 +228,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 </react_native_1.View>
                 <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
-                fontSize: 10.5,
+                fontSize: isNarrow ? 9.5 : 10.5,
                 color: `${AppColors_1.AppColors.white}CC`,
             }} numberOfLines={1}>
                   {settingsPage === 'main'
@@ -226,20 +238,27 @@ const InspectorHeader = react_1.default.memo(() => {
               </react_native_1.View>) : !isAnySelected ? (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 8,
+                gap: isNarrow ? 6 : 8,
                 flex: 1,
                 minWidth: 0,
-                marginRight: 6,
+                marginRight: 4,
             }}>
-                <AppHeaderLogo_1.default size={46} customIcon={appIcon}/>
-                <react_native_1.View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
+                <AppHeaderLogo_1.default size={logoSize} customIcon={appIcon}/>
+                <react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
                   <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 6,
+                gap: isNarrow ? 4 : 6,
                 minWidth: 0,
             }}>
-                    <react_native_1.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
+                    <react_native_1.Text style={[
+                styles_1.default.headerTitle,
+                {
+                    fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
+                    flexShrink: 1,
+                    paddingBottom: 0,
+                },
+            ]} numberOfLines={1} ellipsizeMode="tail">
                       {(0, helpers_1.getAppName)()}
                     </react_native_1.Text>
                     <react_native_1.View style={[
@@ -248,11 +267,18 @@ const InspectorHeader = react_1.default.memo(() => {
                     backgroundColor: envConfig.bg,
                     borderColor: envConfig.border,
                     flexShrink: 0,
+                    paddingHorizontal: isNarrow ? 4.5 : 6,
                     paddingVertical: 1.5,
                     marginBottom: 0,
                 },
             ]}>
-                      <react_native_1.Text style={[styles_1.default.envBadgeText, { color: envConfig.text }]}>
+                      <react_native_1.Text style={[
+                styles_1.default.envBadgeText,
+                {
+                    color: envConfig.text,
+                    fontSize: isNarrow ? 8.5 : 9.5,
+                },
+            ]}>
                         {envConfig.label}
                       </react_native_1.Text>
                     </react_native_1.View>
@@ -261,9 +287,9 @@ const InspectorHeader = react_1.default.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,
@@ -279,15 +305,15 @@ const InspectorHeader = react_1.default.memo(() => {
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
-                        <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
-                    color: '#FFFFFF',
-                    letterSpacing: 0.3,
-                }}>
-                          UPDATE
-                        </react_native_1.Text>
-                        <NetworkIcons_1.BoltIcon size={9} color="#FFFFFF"/>
+                        {!isNarrow && (<react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 8.5,
+                        color: '#FFFFFF',
+                        letterSpacing: 0.3,
+                    }}>
+                            UPDATE
+                          </react_native_1.Text>)}
+                        <NetworkIcons_1.BoltIcon size={isNarrow ? 8 : 9} color="#FFFFFF"/>
                       </react_native_1.Pressable>)}
                   </react_native_1.View>
 
@@ -295,7 +321,7 @@ const InspectorHeader = react_1.default.memo(() => {
                   <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 5,
+                gap: isNarrow ? 4 : 5,
                 minWidth: 0,
             }}>
                     <react_native_1.View style={{
@@ -303,20 +329,21 @@ const InspectorHeader = react_1.default.memo(() => {
                 alignItems: 'center',
                 backgroundColor: `${AppColors_1.AppColors.white}1F`,
                 borderRadius: 5,
-                paddingHorizontal: 6,
+                paddingHorizontal: isNarrow ? 4.5 : 6,
                 paddingVertical: 2,
-                gap: 4,
+                gap: 3.5,
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}2E`,
-                flexShrink: 0,
+                flexShrink: 1,
+                minWidth: 0,
             }}>
-                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>)}
+                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={isNarrow ? 9 : 10}/>)}
                       <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: 9.5,
+                fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
-            }} numberOfLines={1}>
+            }} numberOfLines={1} ellipsizeMode="tail">
                         {appVersionString}
                       </react_native_1.Text>
                     </react_native_1.View>
@@ -333,17 +360,17 @@ const InspectorHeader = react_1.default.memo(() => {
                 alignItems: 'center',
                 backgroundColor: `${AppColors_1.AppColors.white}1F`,
                 borderRadius: 5,
-                paddingHorizontal: 6,
+                paddingHorizontal: isNarrow ? 4.5 : 6,
                 paddingVertical: 2,
-                gap: 4,
+                gap: 3.5,
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}2E`,
                 flexShrink: 0,
             }}>
-                      <NetworkIcons_1.NpmIcon size={10} color="#FF6B6B"/>
+                      <NetworkIcons_1.NpmIcon size={isNarrow ? 9 : 10} color="#FF6B6B"/>
                       <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: 9.5,
+                fontSize: isNarrow ? 8.5 : 9.5,
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
@@ -351,7 +378,7 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Text>
                       {updateAvailable && (<react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
+                    fontSize: 8.5,
                     color: '#F59E0B',
                 }}>
                           ●
@@ -362,7 +389,7 @@ const InspectorHeader = react_1.default.memo(() => {
               </react_native_1.View>) : null}
           </react_native_1.View>
 
-          {isDetailView && (<react_native_1.View style={styles_1.default.headerCenter}>
+          {isDetailView && (<react_native_1.View style={[styles_1.default.headerCenter, { paddingHorizontal: isNarrow ? 2 : 6 }]}>
               {activeTab === 'apis' && selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
@@ -370,23 +397,31 @@ const InspectorHeader = react_1.default.memo(() => {
                     {
                         backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
                             AppColors_1.AppColors.grayText,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selected.method}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {detailTitle}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <react_native_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: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
                     borderWidth: 1,
@@ -396,11 +431,13 @@ const InspectorHeader = react_1.default.memo(() => {
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
                     },
                 ]}/>
                       <react_native_1.Text style={[
                     styles_1.default.headerSubTitle,
-                    { fontFamily: AppFonts_1.AppFonts.interBold },
+                    { fontFamily: AppFonts_1.AppFonts.interBold, fontSize: isNarrow ? 10 : 11 },
                 ]}>
                         {selected.status === 0
                     ? 'Failed'
@@ -411,13 +448,13 @@ const InspectorHeader = react_1.default.memo(() => {
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
+                    paddingHorizontal: isNarrow ? 6 : 8,
+                    paddingVertical: 2.5,
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
-                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
+                      <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                         {selected.duration != null
                     ? `${selected.duration}ms`
                     : '—'}
@@ -427,17 +464,17 @@ const InspectorHeader = react_1.default.memo(() => {
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 4,
-                        paddingHorizontal: 8,
-                        paddingVertical: 3,
+                        paddingHorizontal: isNarrow ? 6 : 8,
+                        paddingVertical: 2.5,
                         borderRadius: 20,
                         backgroundColor: `${AppColors_1.AppColors.white}29`,
                     }}>
-                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white} size={11}/>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                           {(0, helpers_1.getSize)(selected.response)}
                         </react_native_1.Text>
                       </react_native_1.View>)}
-                  </react_native_1.View>
+                  </react_native_1.ScrollView>
                 </react_native_1.View>) : activeTab === 'analytics' && selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
@@ -446,26 +483,36 @@ const InspectorHeader = react_1.default.memo(() => {
                         backgroundColor: selectedEvent.source === 'firebase'
                             ? `${AppColors_1.AppColors.firebaseOrange}4D`
                             : `${AppColors_1.AppColors.purple}4D`,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {selectedEvent.name}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedEvent.source === 'firebase'
                             ? AppColors_1.AppColors.firebaseOrange
                             : AppColors_1.AppColors.purple,
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                    <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                       {Object.keys(selectedEvent.params).length} param
                       {Object.keys(selectedEvent.params).length !== 1
                     ? 's'
@@ -473,7 +520,7 @@ const InspectorHeader = react_1.default.memo(() => {
                       {' · '}
                       {selectedEvent.source}
                     </react_native_1.Text>
-                  </react_native_1.View>
+                  </react_native_1.ScrollView>
                 </react_native_1.View>) : activeTab === 'logs' && selectedLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
@@ -484,33 +531,41 @@ const InspectorHeader = react_1.default.memo(() => {
                             : selectedLog.type === 'warn'
                                 ? `${AppColors_1.AppColors.lightOrange}4D`
                                 : `${AppColors_1.AppColors.purple}4D`,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selectedLog.type.toUpperCase()}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       console.
                       {selectedLog.sourceMethod || selectedLog.type || 'log'}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
+                    paddingHorizontal: isNarrow ? 6 : 8,
+                    paddingVertical: 2.5,
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
-                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 10 : 11}/>
+                      <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                         {(0, helpers_1.formatTime)(selectedLog.timestamp)}
                       </react_native_1.Text>
                     </react_native_1.View>
-                  </react_native_1.View>
+                  </react_native_1.ScrollView>
                 </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
                 const sliceData = reduxState?.[selectedReduxSlice];
                 const keyCount = sliceData && typeof sliceData === 'object'
@@ -526,32 +581,44 @@ const InspectorHeader = react_1.default.memo(() => {
                         styles_1.default.headerMethodBadge,
                         {
                             backgroundColor: `${AppColors_1.AppColors.purple}4D`,
+                            paddingHorizontal: isNarrow ? 5 : 6,
+                            paddingVertical: isNarrow ? 2 : 3,
                         },
                     ]}>
-                          <react_native_1.Text style={styles_1.default.headerMethodText}>SLICE</react_native_1.Text>
+                          <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>SLICE</react_native_1.Text>
                         </react_native_1.View>
-                        <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                        <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                           {selectedReduxSlice}
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                      <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: isNarrow ? 4 : 6,
+                        marginTop: 3,
+                        paddingVertical: 1,
+                    }}>
                         <react_native_1.View style={[
                         styles_1.default.headerStatusDot,
-                        { backgroundColor: AppColors_1.AppColors.liveGreen },
+                        {
+                            backgroundColor: AppColors_1.AppColors.liveGreen,
+                            width: isNarrow ? 6 : 7,
+                            height: isNarrow ? 6 : 7,
+                        },
                     ]}/>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>Live</react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>Live</react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                           •
                         </react_native_1.Text>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                           {keyCount} keys
                         </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                           •
                         </react_native_1.Text>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>{sliceSize}</react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>{sliceSize}</react_native_1.Text>
                         {lastAction?.timestamp && (<>
-                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                               •
                             </react_native_1.Text>
                             <react_native_1.View style={{
@@ -559,13 +626,13 @@ const InspectorHeader = react_1.default.memo(() => {
                             alignItems: 'center',
                             gap: 3,
                         }}>
-                              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={10}/>
-                              <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={isNarrow ? 9 : 10}/>
+                              <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                                 {lastAction.timestamp}
                               </react_native_1.Text>
                             </react_native_1.View>
                           </>)}
-                      </react_native_1.View>
+                      </react_native_1.ScrollView>
                     </react_native_1.View>);
             })()) : activeTab === 'redux' && selectedReduxAction != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
@@ -573,23 +640,35 @@ const InspectorHeader = react_1.default.memo(() => {
                     styles_1.default.headerMethodBadge,
                     {
                         backgroundColor: `${AppColors_1.AppColors.brandPurple}4D`,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>ACTION</react_native_1.Text>
+                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>ACTION</react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {selectedReduxAction.type}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
-                    { backgroundColor: AppColors_1.AppColors.purple },
+                    {
+                        backgroundColor: AppColors_1.AppColors.purple,
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
+                    },
                 ]}/>
-                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                    <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                       {selectedReduxAction.timestamp || 'Dispatched'}
                     </react_native_1.Text>
-                  </react_native_1.View>
+                  </react_native_1.ScrollView>
                 </react_native_1.View>) : activeTab === 'crash' && selectedCrash != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
                   <react_native_1.View style={styles_1.default.headerDetailRow}>
                     <react_native_1.View style={[
@@ -598,40 +677,50 @@ const InspectorHeader = react_1.default.memo(() => {
                         backgroundColor: selectedCrash.isFatal
                             ? AppColors_1.AppColors.red600
                             : AppColors_1.AppColors.amber600,
+                        paddingHorizontal: isNarrow ? 5 : 6,
+                        paddingVertical: isNarrow ? 2 : 3,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                      <react_native_1.Text style={[styles_1.default.headerMethodText, { fontSize: isNarrow ? 9 : 10 }]}>
                         {selectedCrash.isFatal
                     ? 'FATAL'
                     : selectedCrash.type.toUpperCase()}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                    <react_native_1.Text style={[styles_1.default.headerDetailTitle, { fontSize: isNarrow ? 13.5 : 15 }]} numberOfLines={1} ellipsizeMode="middle">
                       {selectedCrash.name || selectedCrash.message}
                     </react_native_1.Text>
                   </react_native_1.View>
-                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                  <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: isNarrow ? 4 : 6,
+                    marginTop: 3,
+                    paddingVertical: 1,
+                }}>
                     <react_native_1.View style={[
                     styles_1.default.headerStatusDot,
                     {
                         backgroundColor: selectedCrash.isFatal
                             ? AppColors_1.AppColors.red600
                             : AppColors_1.AppColors.amber500,
+                        width: isNarrow ? 6 : 7,
+                        height: isNarrow ? 6 : 7,
                     },
                 ]}/>
-                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                    <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                       {selectedCrash.timeStr ||
                     new Date(selectedCrash.timestamp).toLocaleTimeString()}
                     </react_native_1.Text>
                     {selectedCrash.deviceInfo?.platform && (<>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6, fontSize: isNarrow ? 10 : 11 }]}>
                           •
                         </react_native_1.Text>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { fontSize: isNarrow ? 10 : 11 }]}>
                           {selectedCrash.deviceInfo.platform.toUpperCase()}
                         </react_native_1.Text>
                       </>)}
-                  </react_native_1.View>
+                  </react_native_1.ScrollView>
                 </react_native_1.View>) : null}
             </react_native_1.View>)}
 
@@ -642,7 +731,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 alignItems: 'center',
                 justifyContent: 'flex-end',
                 flexShrink: 0,
-                gap: 8,
+                gap: isNarrow ? 5 : 7,
             },
         ]}>
             {isSettingsView && (<TouchableScale_1.default onPress={() => {
@@ -654,8 +743,15 @@ const InspectorHeader = react_1.default.memo(() => {
                         onPress: resetToDefaults,
                     },
                 ]);
-            }} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-                <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={14}/>
+            }} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
+                <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale_1.default>)}
 
             {!isAnySelected && (<TouchableScale_1.default onPress={() => {
@@ -667,7 +763,14 @@ const InspectorHeader = react_1.default.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} hitSlop={15} style={styles_1.default.closeButtonSquare}>
+            }} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
                 <react_native_1.Animated.View style={{
                 transform: [
                     {
@@ -684,16 +787,30 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ],
             }}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={14}/>
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
-            {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={14}/>
+            {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
+                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale_1.default>)}
 
-            <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-              <NetworkIcons_1.CloseWhite size={14}/>
+            <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={[
+            styles_1.default.closeButtonSquare,
+            {
+                width: buttonSize,
+                height: buttonSize,
+                borderRadius: isNarrow ? 6 : 7,
+            },
+        ]}>
+              <NetworkIcons_1.CloseWhite size={isNarrow ? 12 : 14}/>
             </TouchableScale_1.default>
           </react_native_1.View>
         </react_native_1.View>