react-native-inapp-inspector 2.3.9 → 2.3.10

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

@@ -1,99 +1,53 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Animated, FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
-import useAccordion from '../../customHooks/useAccordion';
 import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import DomainHeader from '../DomainHeader';
 import LogCard from '../LogCard';
 import EmptyState from '../EmptyState';
 import EndOfListFooter from '../EndOfListFooter';
+import NetworkFilterModal from './NetworkFilterModal';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { STATUS_FILTERS, METHOD_COLORS } from '../../constants';
+import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
 import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, GlobeIcon, RequestIcon, ResponseIcon, HeadersIcon, AtomIcon, BoltIcon, ShieldAlertIcon, } from '../NetworkIcons';
-const STATUS_META = {
-    ALL: { color: AppColors.grayText, Icon: LayersIcon },
-    '2xx': { color: AppColors.greenColor, Icon: CircleCheckIcon },
-    '200': { color: AppColors.greenColor, Icon: CircleCheckIcon },
-    '3xx': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
-    '300': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
-    '4xx': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
-    '400': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
-    '404': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
-    '5xx': { color: AppColors.errorColor, Icon: CircleXIcon },
-    '500': { color: AppColors.errorColor, Icon: CircleXIcon },
-    Failed: { color: AppColors.errorColor, Icon: CircleXIcon },
-};
-const getStatusMeta = (filter) => {
-    if (STATUS_META[filter])
-        return STATUS_META[filter];
-    const num = parseInt(filter, 10);
-    if (!isNaN(num)) {
-        if (num >= 200 && num < 300)
-            return { color: AppColors.greenColor, Icon: CircleCheckIcon };
-        if (num >= 300 && num < 400)
-            return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
-        if (num >= 400 && num < 500)
-            return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
-        if (num >= 500)
-            return { color: AppColors.errorColor, Icon: CircleXIcon };
-    }
-    if (filter.startsWith('2'))
-        return { color: AppColors.greenColor, Icon: CircleCheckIcon };
-    if (filter.startsWith('3'))
-        return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
-    if (filter.startsWith('4'))
-        return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
-    if (filter.startsWith('5'))
-        return { color: AppColors.errorColor, Icon: CircleXIcon };
-    return { color: AppColors.grayText, Icon: LayersIcon };
-};
-const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, }) => {
-    const iconColor = active ? color : AppColors.grayTextWeak;
-    return (<TouchableScale style={styles.statusFilterWrap} onPress={onPress} hitSlop={10}>
-      <View style={[
-            styles.statusFilterChip,
-            {
-                paddingHorizontal: 9,
-                paddingVertical: 5,
-                borderRadius: 7,
-                borderWidth: 1,
-                borderColor: active ? color : `${AppColors.grayBorderSecondary}`,
-                backgroundColor: active ? `${color}14` : AppColors.grayBackground,
-            },
-            active && {
-                shadowColor: color,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.2,
-                shadowRadius: 2,
-                elevation: 1.5,
-            },
-        ]}>
-        {badge != null ? (<View style={[
-                styles.methodBadgeMini,
-                { backgroundColor: badge },
-            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
-        <Text numberOfLines={1} style={[
-            styles.statusFilterText,
-            {
-                color: active ? color : AppColors.grayText,
-                fontFamily: active ? AppFonts.interBold : AppFonts.interMedium,
-            },
-        ]}>
-          {label}
-        </Text>
-      </View>
-    </TouchableScale>);
-});
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
-    const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
+    const [isFilterModalOpen, setIsFilterModalOpen] = React.useState(false);
     const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+    const modalFilterState = useMemo(() => ({
+        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
+        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
+        latency: 'all',
+        protocol: 'all',
+        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
+    }), [statusFilters, methodFilters, sortOrder]);
+    const handleApplyNetworkFilters = useCallback((newFilters) => {
+        if (newFilters.statusCodes.has('all') ||
+            newFilters.statusCodes.size === 0) {
+            setStatusFilters(new Set());
+        }
+        else {
+            setStatusFilters(new Set(newFilters.statusCodes));
+        }
+        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
+            setMethodFilters(new Set());
+        }
+        else {
+            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
+        }
+        if (newFilters.sortBy === 'time_asc') {
+            setSortOrder('oldest');
+        }
+        else {
+            setSortOrder('newest');
+        }
+    }, [setStatusFilters, setMethodFilters, setSortOrder]);
     const quickCounts = useMemo(() => {
         let errorCount = 0;
         let successCount = 0;
@@ -520,10 +474,12 @@ const NetworkTab = React.memo(() => {
 
                 <TouchableScale style={[
                 styles.toolbarBtn,
-                filtersAccordion.isOpen &&
-                    styles.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
-                  <FilterIcon color={filtersAccordion.isOpen
+                (statusFilters.size > 0 || methodFilters.size > 0) && {
+                    borderColor: AppColors.purple,
+                    backgroundColor: `${AppColors.purple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+                  <FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors.purple
                 : AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
@@ -685,6 +641,51 @@ const NetworkTab = React.memo(() => {
                       </View>
                     </TouchableScale>);
             })}
+
+                <TouchableScale onPress={() => setIsFilterModalOpen(true)}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                paddingVertical: 4.5,
+                borderRadius: 8,
+                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? `${AppColors.purple}20`
+                    : AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors.purple
+                    : AppColors.grayBorderSecondary,
+                gap: 5,
+            }}>
+                    <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors.purple
+                : AppColors.grayText}/>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors.purple
+                    : AppColors.grayText,
+            }}>
+                      More Filters
+                    </Text>
+                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
+                    backgroundColor: AppColors.purple,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 6,
+                }}>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors.white,
+                }}>
+                          {statusFilters.size + methodFilters.size}
+                        </Text>
+                      </View>)}
+                  </View>
+                </TouchableScale>
               </ScrollView>
             </View>
 
@@ -833,86 +834,24 @@ const NetworkTab = React.memo(() => {
                 </TouchableScale>
               </View>)}
 
-            <Animated.View style={[
-                filtersAccordion.bodyStyle,
-                { overflow: 'hidden' },
-            ]}>
-              <View style={styles.filtersContainer}>
-                <Text style={styles.filtersHeading}>
-                  STATUS
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                  {STATUS_FILTERS.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? statusFilters.size === 0
-                    : statusFilters.has(filter);
-                const meta = getStatusMeta(filter);
-                return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
-                        if (isAll) {
-                            setStatusFilters(new Set());
-                        }
-                        else {
-                            setStatusFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </ScrollView>
-
-                <Text style={[
-                styles.filtersHeading,
-                { marginTop: 16 },
-            ]}>
-                  METHOD
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                  {availableMethods.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? methodFilters.size === 0
-                    : methodFilters.has(filter);
-                const methodColor = METHOD_COLORS[filter] ??
-                    METHOD_COLORS.ALL;
-                return (<FilterChip key={filter} label={filter} color={methodColor} badge={methodColor} active={active} onPress={() => {
-                        if (isAll) {
-                            setMethodFilters(new Set());
-                        }
-                        else {
-                            setMethodFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </ScrollView>
-              </View>
-            </Animated.View>
-
             {(search ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<Text style={styles.resultCount}>
+                methodFilters.size > 0 ||
+                quickFilter !== 'all') && (<Text style={styles.resultCount}>
                 {filteredLogs.length === logs.length
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </Text>)}
           </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                methodFilters.size > 0 ||
+                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
                 ? 'No matching API requests'
                 : 'No network activity'} onClearSearch={() => {
                 setSearch('');
                 setStatusFilters(new Set());
                 setMethodFilters(new Set());
+                setQuickFilter('all');
                 setSearchScope('all');
             }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles.listContent,
@@ -940,6 +879,9 @@ const NetworkTab = React.memo(() => {
           <ChevronIcon color={AppColors.white} size={18}/>
         </View>
       </TouchableScale>
+
+      
+      <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
     </View>);
 });
 export default NetworkTab;

package/dist/esm/components/LogCard.js

@@ -198,29 +198,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                   GQL
                 </Text>
               </View>)}
-
-            
-            {item.duration != null && !isFailed && (<View style={[
-                styles.chip,
-                {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                },
-            ]}>
-                <Text style={[
-                styles.chipText,
-                {
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: durationColor,
-                },
-            ]}>
-                  {item.duration}ms
-                </Text>
-              </View>)}
           </View>
 
           <View style={[
@@ -239,6 +216,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                     : isLoading
                         ? `${AppColors.darkOrange}30`
                         : `${statusColor}30`,
+                flexShrink: 0,
             },
         ]}>
             {renderStatusIcon()}
@@ -272,6 +250,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             alignItems: 'center',
             justifyContent: 'center',
             marginRight: 4,
+            flexShrink: 0,
         }}>
               <GlobeIcon color={AppColors.skyBlue} size={11}/>
             </View>
@@ -310,8 +289,8 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
 
         
         <View style={styles.cardFooterRow}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0 }}>
-            <View style={styles.cardDateRow}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8 }}>
+            <View style={[styles.cardDateRow, { flexShrink: 0 }]}>
               <CalendarIcon color={AppColors.grayTextWeak} size={10}/>
               <Text style={styles.cardDateText}>{triggeredAt}</Text>
             </View>
@@ -328,7 +307,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                     paddingVertical: 1,
                     borderRadius: 4,
                     flexShrink: 1,
-                    maxWidth: 160,
+                    minWidth: 0,
                 },
             ]}>
                 <PinIcon color={AppColors.skyBlue} size={8.5}/>

package/dist/esm/components/NetworkIcons.d.ts

@@ -133,3 +133,4 @@ export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -730,3 +730,7 @@ export const PencilIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
 export const PlusIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+export const LockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);

package/dist/esm/constants/index.js

@@ -18,6 +18,9 @@ export const METHOD_COLORS = {
     PUT: '#D97706',
     PATCH: '#7C3AED',
     DELETE: '#DC2626',
+    QUERY: '#0284C7',
+    OPTIONS: '#475569',
+    HEAD: '#0891B2',
 };
 export const DOMAIN_COLORS = AppColors.domainColors;
 export const DURATION_FAST_MS = 200;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.9";
+export declare const LIB_VERSION = "2.3.10";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.9';
+export const LIB_VERSION = '2.3.10';

package/dist/esm/styles/index.d.ts

@@ -603,6 +603,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         marginBottom: number;
+        minHeight: number;
     };
     cardHeaderLeft: {
         flexDirection: string;
@@ -610,11 +611,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flex: number;
         marginRight: number;
         gap: number;
+        minWidth: number;
     };
     cardHeaderRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     smallCheckbox: {
         width: number;
@@ -701,6 +704,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         flex: number;
+        minWidth: number;
         gap: number;
     };
     slugTag: {
@@ -713,6 +717,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         paddingVertical: number;
         borderRadius: number;
         marginTop: number;
+        flexShrink: number;
     };
     slugText: {
         fontFamily: string;
@@ -725,17 +730,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardFooterRow: {
         flexDirection: string;
         alignItems: string;
         justifyContent: string;
         marginTop: number;
+        minHeight: number;
     };
     cardDateRow: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     cardDateText: {
         fontFamily: string;
@@ -747,6 +755,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     chip: {
         flexDirection: string;
@@ -848,11 +857,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         alignItems: string;
         justifyContent: string;
         paddingBottom: number;
+        gap: number;
     };
     detailInfoRight: {
         flexDirection: string;
         alignItems: string;
         gap: number;
+        flexShrink: number;
     };
     metaContainer: {
         backgroundColor: string;

package/dist/esm/styles/index.js

@@ -558,18 +558,21 @@ export const getRawStyles = (colors) => ({
         alignItems: 'center',
         justifyContent: 'space-between',
         marginBottom: 4,
+        minHeight: 22,
     },
     cardHeaderLeft: {
         flexDirection: 'row',
         alignItems: 'center',
         flex: 1,
-        marginRight: 8,
-        gap: 6,
+        marginRight: 6,
+        gap: 5,
+        minWidth: 0,
     },
     cardHeaderRight: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     smallCheckbox: {
         width: 15,
@@ -650,6 +653,7 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'flex-start',
         flex: 1,
+        minWidth: 0,
         gap: 6,
     },
     slugTag: {
@@ -662,6 +666,7 @@ export const getRawStyles = (colors) => ({
         paddingVertical: 1.5,
         borderRadius: 4,
         marginTop: 1,
+        flexShrink: 0,
     },
     slugText: {
         fontFamily: AppFonts.interMedium,
@@ -674,17 +679,20 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
+        flexShrink: 0,
     },
     cardFooterRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginTop: 2,
+        marginTop: 4,
+        minHeight: 18,
     },
     cardDateRow: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3.5,
+        flexShrink: 0,
     },
     cardDateText: {
         fontFamily: AppFonts.interRegular,
@@ -696,6 +704,7 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
+        flexShrink: 0,
     },
     chip: {
         flexDirection: 'row',
@@ -787,9 +796,15 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingBottom: 10,
+        paddingBottom: 8,
+        gap: 8,
+    },
+    detailInfoRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        flexShrink: 0,
     },
-    detailInfoRight: { flexDirection: 'row', alignItems: 'center', gap: 6 },
     metaContainer: {
         backgroundColor: colors.primaryLight,
         borderWidth: 1,

package/dist/esm/types/enums.d.ts

@@ -17,6 +17,9 @@ export declare const Method: {
     readonly Put: "PUT";
     readonly Patch: "PATCH";
     readonly Delete: "DELETE";
+    readonly Query: "QUERY";
+    readonly Options: "OPTIONS";
+    readonly Head: "HEAD";
 };
 export type Method = (typeof Method)[keyof typeof Method];
 export declare const StatusFilter: {

package/dist/esm/types/enums.js

@@ -16,6 +16,9 @@ export const Method = {
     Put: 'PUT',
     Patch: 'PATCH',
     Delete: 'DELETE',
+    Query: 'QUERY',
+    Options: 'OPTIONS',
+    Head: 'HEAD',
 };
 export const StatusFilter = {
     All: 'ALL',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",
@@ -105,7 +105,7 @@
     "prepare": "npm run build",
     "watch": "tsc -w",
     "prepack": "npm run build",
-    "publish": "node release.cjs",
+    "release": "node release.cjs",
     "bundle-visualizer": "react-native-bundle-visualizer"
   },
   "keywords": [

package/src/components/Inspector/NetworkDetail.tsx

@@ -98,7 +98,7 @@ const NetworkDetail = React.memo(() => {
   return (
     <View style={{flex: 1}}>
       {/* Non-scrollable details header */}
-      <View style={{paddingHorizontal: 6, paddingTop: 4}}>
+      <View style={{paddingHorizontal: 8, paddingTop: 4}}>
         <View style={styles.detailInfoBar}>
           {(() => {
             let schemeStr = '';
@@ -159,6 +159,7 @@ const NetworkDetail = React.memo(() => {
                       gap: 6,
                       flexWrap: 'wrap',
                       flex: 1,
+                      minWidth: 0,
                     }}>
                     {/* Method Chip */}
                     <View