react-native-inapp-inspector 1.1.32 → 1.1.34

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

@@ -58,7 +58,7 @@ const getOriginBadge = (originType) => {
         case 'saga':
             return {
                 label: 'SAGA',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => (<NetworkIcons_1.BoltIcon color={color} size={size}/>),
                 bg: AppColors_1.AppColors.purple100,
                 text: AppColors_1.AppColors.brandPurple,
                 border: AppColors_1.AppColors.purple200,
@@ -66,7 +66,7 @@ const getOriginBadge = (originType) => {
         case 'thunk':
             return {
                 label: 'THUNK',
-                icon: '⚛️',
+                renderIcon: (color, size = 9) => (<NetworkIcons_1.AtomIcon color={color} size={size}/>),
                 bg: AppColors_1.AppColors.amber100,
                 text: AppColors_1.AppColors.amber800Warm,
                 border: AppColors_1.AppColors.amber200,
@@ -74,7 +74,7 @@ const getOriginBadge = (originType) => {
         case 'ui':
             return {
                 label: 'UI',
-                icon: '📱',
+                renderIcon: (color, size = 9) => (<NetworkIcons_1.ScreenIcon color={color} size={size}/>),
                 bg: AppColors_1.AppColors.sky100,
                 text: AppColors_1.AppColors.sky600,
                 border: AppColors_1.AppColors.sky400,
@@ -82,7 +82,7 @@ const getOriginBadge = (originType) => {
         case 'listener':
             return {
                 label: 'LISTENER',
-                icon: '👂',
+                renderIcon: (color, size = 9) => (<NetworkIcons_1.ListenerIcon color={color} size={size}/>),
                 bg: AppColors_1.AppColors.teal100,
                 text: AppColors_1.AppColors.teal700,
                 border: AppColors_1.AppColors.teal400,
@@ -90,7 +90,7 @@ const getOriginBadge = (originType) => {
         default:
             return {
                 label: 'DIRECT',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => (<NetworkIcons_1.BoltIcon color={color} size={size}/>),
                 bg: AppColors_1.AppColors.slate100,
                 text: AppColors_1.AppColors.slate700,
                 border: AppColors_1.AppColors.slate200,
@@ -99,11 +99,12 @@ const getOriginBadge = (originType) => {
 };
 const ReduxDetail = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
-    const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, setSelectedReduxAction, } = (0, InspectorContext_1.useInspector)();
+    const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, } = (0, InspectorContext_1.useInspector)();
     // Search filter within details
     const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
-    // Sub-tabs for Slice
+    // Sub-tabs for Slice & Action
     const [sliceTab, setSliceTab] = (0, react_1.useState)('live');
+    const [actionTab, setActionTab] = (0, react_1.useState)('payload');
     const [viewMode, setViewMode] = (0, react_1.useState)('pretty');
     // Selected Action inside Timeline
     const [expandedActionId, setExpandedActionId] = (0, react_1.useState)(null);
@@ -124,6 +125,18 @@ const ReduxDetail = react_1.default.memo(() => {
             return action.affectedSlices.includes(selectedReduxSlice);
         });
     }, [allActionHistory, selectedReduxSlice]);
+    // Filtered slice actions by search query in timeline tab
+    const filteredTimelineActions = (0, react_1.useMemo)(() => {
+        if (!detailSearch.trim())
+            return sliceActions;
+        const q = detailSearch.toLowerCase();
+        return sliceActions.filter(action => {
+            return (action.type.toLowerCase().includes(q) ||
+                (action.callerFile && action.callerFile.toLowerCase().includes(q)) ||
+                (action.payload &&
+                    JSON.stringify(action.payload).toLowerCase().includes(q)));
+        });
+    }, [sliceActions, detailSearch]);
     (0, react_1.useEffect)(() => {
         if (!selectedReduxSlice)
             return;
@@ -220,22 +233,24 @@ const ReduxDetail = react_1.default.memo(() => {
         const sliceTabs = [
             {
                 key: 'live',
-                label: t('redux.liveState'),
+                label: t('redux.liveState', 'Live State'),
                 icon: (isActive) => (<NetworkIcons_1.LiveStateIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
             },
             {
                 key: 'timeline',
-                label: `${t('redux.timeline')} (${sliceActions.length})`,
+                label: `${t('redux.timeline', 'Timeline')} (${sliceActions.length})`,
                 icon: (isActive) => (<NetworkIcons_1.TimelineIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
             },
             {
                 key: 'persisted',
-                label: isPersisted ? t('redux.persisted') : t('redux.storage'),
+                label: isPersisted
+                    ? t('redux.persisted', 'Persisted')
+                    : t('redux.storage', 'Storage'),
                 icon: (isActive) => (<NetworkIcons_1.StorageIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
             },
             {
                 key: 'metadata',
-                label: t('redux.metadata'),
+                label: t('redux.metadata', 'Metadata'),
                 icon: (isActive) => (<NetworkIcons_1.MetadataIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
             },
         ];
@@ -243,18 +258,34 @@ const ReduxDetail = react_1.default.memo(() => {
         {/* Info Header Bar */}
         <react_native_1.View style={reduxDetailStyles.infoBar}>
           <react_native_1.View style={reduxDetailStyles.infoTopRow}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap', flex: 1 }}>
-              <react_native_1.View style={[reduxDetailStyles.methodBadge, { backgroundColor: AppColors_1.AppColors.indigo600Alt }]}>
-                <react_native_1.Text style={reduxDetailStyles.methodBadgeText}>{t('redux.slice')}</react_native_1.Text>
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                flexWrap: 'wrap',
+                flex: 1,
+                minWidth: 0,
+            }}>
+              <react_native_1.View style={[
+                reduxDetailStyles.methodBadge,
+                { backgroundColor: AppColors_1.AppColors.indigo600Alt },
+            ]}>
+                <react_native_1.Text style={reduxDetailStyles.methodBadgeText}>
+                  {t('redux.slice', 'SLICE')}
+                </react_native_1.Text>
               </react_native_1.View>
-              <react_native_1.Text style={reduxDetailStyles.sliceNameText}>
+              <react_native_1.Text style={reduxDetailStyles.sliceNameText} numberOfLines={1}>
                 {selectedReduxSlice}
               </react_native_1.Text>
               {isPersisted ? (<react_native_1.View style={reduxDetailStyles.persistedChip}>
                   <NetworkIcons_1.StorageIcon color={AppColors_1.AppColors.emerald700} size={10}/>
-                  <react_native_1.Text style={reduxDetailStyles.persistedChipText}>{t('redux.persisted').toUpperCase()}</react_native_1.Text>
+                  <react_native_1.Text style={reduxDetailStyles.persistedChipText}>
+                    {t('redux.persisted', 'Persisted').toUpperCase()}
+                  </react_native_1.Text>
                 </react_native_1.View>) : (<react_native_1.View style={reduxDetailStyles.inMemoryChip}>
-                  <react_native_1.Text style={reduxDetailStyles.inMemoryChipText}>{t('redux.inMemory').toUpperCase()}</react_native_1.Text>
+                  <react_native_1.Text style={reduxDetailStyles.inMemoryChipText}>
+                    {t('redux.inMemory', 'In-Memory').toUpperCase()}
+                  </react_native_1.Text>
                 </react_native_1.View>)}
               {lastAction?.timestamp && (<react_native_1.View style={reduxDetailStyles.timePill}>
                   <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.violet600} size={10}/>
@@ -265,29 +296,93 @@ const ReduxDetail = react_1.default.memo(() => {
             </react_native_1.View>
 
             {/* Copy Button */}
-            <CopyButton_1.default value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson')}/>
+            <CopyButton_1.default value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson', 'Slice JSON')}/>
           </react_native_1.View>
 
           {/* Sub Stats Row */}
           <react_native_1.View style={reduxDetailStyles.subStatsRow}>
-            <react_native_1.View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors_1.AppColors.indigo50, borderColor: AppColors_1.AppColors.indigo400 }]}>
+            <react_native_1.View style={[
+                reduxDetailStyles.statPill,
+                {
+                    backgroundColor: AppColors_1.AppColors.indigo50,
+                    borderColor: AppColors_1.AppColors.indigo400,
+                },
+            ]}>
               <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.indigo600Alt} size={11}/>
-              <react_native_1.Text style={[reduxDetailStyles.statLabel, { color: AppColors_1.AppColors.indigo600Alt }]}>{t('redux.keys')}:</react_native_1.Text>
-              <react_native_1.Text style={[reduxDetailStyles.statValue, { color: AppColors_1.AppColors.indigo600Alt }]}>{fieldsCount}</react_native_1.Text>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors_1.AppColors.indigo600Alt },
+            ]}>
+                {t('redux.keys', 'Keys')}:
+              </react_native_1.Text>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors_1.AppColors.indigo600Alt },
+            ]}>
+                {fieldsCount}
+              </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors_1.AppColors.sky100, borderColor: AppColors_1.AppColors.sky400 }]}>
-              <react_native_1.Text style={[reduxDetailStyles.statLabel, { color: AppColors_1.AppColors.sky600 }]}>{t('redux.size')}:</react_native_1.Text>
-              <react_native_1.Text style={[reduxDetailStyles.statValue, { color: AppColors_1.AppColors.sky600 }]}>{(0, helpers_1.getSize)(sliceData)}</react_native_1.Text>
+            <react_native_1.View style={[
+                reduxDetailStyles.statPill,
+                {
+                    backgroundColor: AppColors_1.AppColors.sky100,
+                    borderColor: AppColors_1.AppColors.sky400,
+                },
+            ]}>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors_1.AppColors.sky600 },
+            ]}>
+                {t('redux.size', 'Size')}:
+              </react_native_1.Text>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors_1.AppColors.sky600 },
+            ]}>
+                {(0, helpers_1.getSize)(sliceData)}
+              </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors_1.AppColors.purple100, borderColor: AppColors_1.AppColors.purple200 }]}>
+            <react_native_1.View style={[
+                reduxDetailStyles.statPill,
+                {
+                    backgroundColor: AppColors_1.AppColors.purple100,
+                    borderColor: AppColors_1.AppColors.purple200,
+                },
+            ]}>
               <NetworkIcons_1.TimelineIcon color={AppColors_1.AppColors.violet600} size={11}/>
-              <react_native_1.Text style={[reduxDetailStyles.statLabel, { color: AppColors_1.AppColors.brandPurple }]}>{t('redux.timeline')}:</react_native_1.Text>
-              <react_native_1.Text style={[reduxDetailStyles.statValue, { color: AppColors_1.AppColors.brandPurple }]}>{sliceActions.length}</react_native_1.Text>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors_1.AppColors.brandPurple },
+            ]}>
+                {t('redux.timeline', 'Timeline')}:
+              </react_native_1.Text>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors_1.AppColors.brandPurple },
+            ]}>
+                {sliceActions.length}
+              </react_native_1.Text>
             </react_native_1.View>
-            {lastAction && (<react_native_1.View style={[reduxDetailStyles.statPill, { backgroundColor: AppColors_1.AppColors.amber100, borderColor: AppColors_1.AppColors.amber200, flex: 1, minWidth: 140 }]}>
+            {lastAction && (<react_native_1.View style={[
+                    reduxDetailStyles.statPill,
+                    {
+                        backgroundColor: AppColors_1.AppColors.amber100,
+                        borderColor: AppColors_1.AppColors.amber200,
+                        flexShrink: 1,
+                        maxWidth: 160,
+                    },
+                ]}>
                 <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber800Warm} size={11}/>
-                <react_native_1.Text style={[reduxDetailStyles.statLabel, { color: AppColors_1.AppColors.amber800Warm }]}>{t('redux.last')}:</react_native_1.Text>
-                <react_native_1.Text style={[reduxDetailStyles.statValue, { color: AppColors_1.AppColors.amber800Warm }]} numberOfLines={1}>
+                <react_native_1.Text style={[
+                    reduxDetailStyles.statLabel,
+                    { color: AppColors_1.AppColors.amber800Warm },
+                ]}>
+                  {t('redux.last', 'Last')}:
+                </react_native_1.Text>
+                <react_native_1.Text style={[
+                    reduxDetailStyles.statValue,
+                    { color: AppColors_1.AppColors.amber800Warm, flexShrink: 1 },
+                ]} numberOfLines={1}>
                   {lastAction.type}
                 </react_native_1.Text>
               </react_native_1.View>)}
@@ -297,10 +392,12 @@ const ReduxDetail = react_1.default.memo(() => {
           <SegmentedTabs_1.default tabs={sliceTabs} activeKey={sliceTab} onChange={key => setSliceTab(key)} style={{ marginTop: 10 }}/>
         </react_native_1.View>
 
-        {/* Search Bar within slice */}
+        {/* Search Bar within slice (for Live, Timeline, Persisted) */}
         {sliceTab !== 'metadata' && (<react_native_1.View style={reduxDetailStyles.searchContainer}>
             <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-            <react_native_1.TextInput placeholder="Search keys, values, or action types..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={reduxDetailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            <react_native_1.TextInput placeholder={sliceTab === 'timeline'
+                    ? 'Search action type, file, or payload...'
+                    : 'Search keys or values...'} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={reduxDetailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
             {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10}>
                 <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               </react_native_1.Pressable>)}
@@ -308,11 +405,14 @@ const ReduxDetail = react_1.default.memo(() => {
 
         {/* Content Body */}
         {sliceTab === 'timeline' ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            {sliceActions.length === 0 ? (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+            {filteredTimelineActions.length === 0 ? (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+                <NetworkIcons_1.TimelineIcon color={AppColors_1.AppColors.grayTextWeak} size={28}/>
                 <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>
-                  No dispatched actions recorded for this slice yet.
+                  {detailSearch.trim()
+                        ? 'No actions matching your search query.'
+                        : 'No dispatched actions recorded for this slice yet.'}
                 </react_native_1.Text>
-              </react_native_1.View>) : (sliceActions.map((action, aIdx) => {
+              </react_native_1.View>) : (filteredTimelineActions.map((action, aIdx) => {
                     const isExpanded = expandedActionId === action.id;
                     const originMeta = getOriginBadge(action.originType);
                     const callerBasename = action.callerFile
@@ -321,7 +421,14 @@ const ReduxDetail = react_1.default.memo(() => {
                     return (<AnimatedEntrance_1.default key={action.id} index={aIdx} distance={6}>
                     <TouchableScale_1.default onPress={() => setExpandedActionId(isExpanded ? null : action.id)} style={reduxDetailStyles.timelineCard}>
                       <react_native_1.View style={reduxDetailStyles.timelineHeader}>
-                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
+                        <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                            flex: 1,
+                            minWidth: 0,
+                            flexWrap: 'wrap',
+                        }}>
                           <react_native_1.View style={reduxDetailStyles.actionBadge}>
                             <react_native_1.Text style={reduxDetailStyles.actionBadgeText}>
                               #{action.id}
@@ -333,13 +440,13 @@ const ReduxDetail = react_1.default.memo(() => {
                             alignItems: 'center',
                             gap: 3,
                             backgroundColor: originMeta.bg,
-                            paddingHorizontal: 6,
+                            paddingHorizontal: 5,
                             paddingVertical: 2,
                             borderRadius: 4,
                             borderWidth: 1,
                             borderColor: originMeta.border,
                         }}>
-                            <react_native_1.Text style={{ fontSize: 9 }}>{originMeta.icon}</react_native_1.Text>
+                            {originMeta.renderIcon(originMeta.text, 8.5)}
                             <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
                             fontSize: 8.5,
@@ -366,18 +473,29 @@ const ReduxDetail = react_1.default.memo(() => {
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 justifyContent: 'space-between',
-                                marginTop: 5,
+                                marginTop: 6,
                                 marginBottom: 2,
-                                paddingHorizontal: 7,
-                                paddingVertical: 3,
+                                paddingHorizontal: 8,
+                                paddingVertical: 4,
                                 backgroundColor: AppColors_1.AppColors.grayBackground,
-                                borderRadius: 5,
+                                borderRadius: 6,
                                 borderWidth: 1,
                                 borderColor: AppColors_1.AppColors.dividerColor,
                             }}>
-                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flex: 1, minWidth: 0 }}>
-                            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>
-                              {t('redux.triggeredFrom')}
+                          <react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 5,
+                                flex: 1,
+                                minWidth: 0,
+                            }}>
+                            <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.sky600} size={10}/>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interMedium,
+                                fontSize: 9.5,
+                                color: AppColors_1.AppColors.grayTextWeak,
+                            }}>
+                              {t('redux.triggeredFrom', 'Triggered From:')}
                             </react_native_1.Text>
                             <react_native_1.Text style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
@@ -394,12 +512,16 @@ const ReduxDetail = react_1.default.memo(() => {
                                 gap: 3,
                                 backgroundColor: AppColors_1.AppColors.sky100,
                                 paddingHorizontal: 5,
-                                paddingVertical: 1.5,
-                                borderRadius: 3,
+                                paddingVertical: 2,
+                                borderRadius: 4,
                             }}>
                             <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={9}/>
-                            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 8.5, color: AppColors_1.AppColors.sky600 }}>
-                              {t('redux.openInEditor')}
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: AppColors_1.AppColors.sky600,
+                            }}>
+                              {t('redux.openInEditor', 'Open in Editor')}
                             </react_native_1.Text>
                           </react_native_1.Pressable>
                         </react_native_1.View>)}
@@ -407,9 +529,9 @@ const ReduxDetail = react_1.default.memo(() => {
                       {/* Expanded Payload, Diff Viewer & Call Stack */}
                       {isExpanded ? (<react_native_1.View style={reduxDetailStyles.expandedContent}>
                           {/* Call Stack Trace Box */}
-                          {action.stack ? (<react_native_1.View style={{ marginBottom: 10 }}>
+                          {action.stack ? (<react_native_1.View style={{ marginBottom: 12 }}>
                               <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
-                                {t('redux.callStack')}:
+                                {t('redux.callStack', 'Call Stack Trace')}:
                               </react_native_1.Text>
                               <react_native_1.View style={{
                                     backgroundColor: AppColors_1.AppColors.grayBackground,
@@ -422,37 +544,48 @@ const ReduxDetail = react_1.default.memo(() => {
                                 {action.stack
                                     .split('\n')
                                     .map(l => l.trim())
-                                    .filter(l => l.length > 0 && !l.includes('reduxLogger') && !l.includes('inspectorReduxMiddleware'))
+                                    .filter(l => l.length > 0 &&
+                                    !l.includes('reduxLogger') &&
+                                    !l.includes('inspectorReduxMiddleware'))
                                     .slice(0, 8)
                                     .map((frameLine, fIdx) => {
                                     const parsed = (0, helpers_1.parseStackLine)(frameLine, fIdx === 0);
                                     const isApp = parsed.frameType === 'app';
                                     return (<react_native_1.Pressable key={fIdx} onPress={() => {
                                             if (parsed.fileName !== 'Unknown') {
-                                                (0, helpers_1.openInVSCode)(parsed.fullPath || parsed.fileName, parsed.lineNumber, parsed.columnNumber);
+                                                (0, helpers_1.openInVSCode)(parsed.fullPath ||
+                                                    parsed.fileName, parsed.lineNumber, parsed.columnNumber);
                                             }
                                         }} style={{
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
-                                            paddingVertical: 2.5,
+                                            paddingVertical: 3,
                                             borderBottomWidth: fIdx < 7 ? 0.5 : 0,
                                             borderBottomColor: AppColors_1.AppColors.dividerColor,
                                         }}>
                                         <react_native_1.View style={{ flex: 1, minWidth: 0 }}>
                                           <react_native_1.Text style={{
-                                            fontFamily: isApp ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interRegular,
+                                            fontFamily: isApp
+                                                ? AppFonts_1.AppFonts.interBold
+                                                : AppFonts_1.AppFonts.interRegular,
                                             fontSize: 9.5,
-                                            color: isApp ? AppColors_1.AppColors.primaryBlack : AppColors_1.AppColors.grayTextWeak,
+                                            color: isApp
+                                                ? AppColors_1.AppColors.primaryBlack
+                                                : AppColors_1.AppColors.grayTextWeak,
                                         }} numberOfLines={1}>
                                             {parsed.functionName || 'anonymous'}
                                           </react_native_1.Text>
                                           <react_native_1.Text style={{
                                             fontFamily: AppFonts_1.AppFonts.interRegular,
                                             fontSize: 8.5,
-                                            color: isApp ? AppColors_1.AppColors.sky600 : AppColors_1.AppColors.grayTextWeak,
+                                            color: isApp
+                                                ? AppColors_1.AppColors.sky600
+                                                : AppColors_1.AppColors.grayTextWeak,
                                         }} numberOfLines={1}>
-                                            {parsed.fileName}:{parsed.lineNumber || 1}:{parsed.columnNumber || 1}
+                                            {parsed.fileName}:
+                                            {parsed.lineNumber || 1}:
+                                            {parsed.columnNumber || 1}
                                           </react_native_1.Text>
                                         </react_native_1.View>
                                         {isApp && (<NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={10}/>)}
@@ -461,20 +594,20 @@ const ReduxDetail = react_1.default.memo(() => {
                               </react_native_1.View>
                             </react_native_1.View>) : null}
 
-                          {action.payload !== undefined && (<react_native_1.View style={{ marginBottom: 10 }}>
+                          {action.payload !== undefined && (<react_native_1.View style={{ marginBottom: 12 }}>
                               <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
-                                {t('redux.actionPayload')}
+                                {t('redux.actionPayload', 'Action Payload:')}
                               </react_native_1.Text>
-                              <JsonViewer_1.default data={action.payload} search={detailSearch} forceOpen={true}/>
+                              <JsonViewer_1.default data={action.payload} search={detailSearch} forceOpen={true} wrap={true}/>
                             </react_native_1.View>)}
 
                           <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
-                            {t('redux.stateChangesDiff')}
+                            {t('redux.stateChangesDiff', 'State Changes (Diff):')}
                           </react_native_1.Text>
                           <DiffViewer_1.default oldData={action.prevState?.[selectedReduxSlice] || {}} newData={action.nextState?.[selectedReduxSlice] || {}} forceOpen={true}/>
                         </react_native_1.View>) : (<react_native_1.View style={reduxDetailStyles.collapsedPrompt}>
                           <react_native_1.Text style={reduxDetailStyles.collapsedPromptText}>
-                            {t('redux.tapToInspectAction')}
+                            {t('redux.tapToInspectAction', 'Tap to inspect action payload & diff changes')}
                           </react_native_1.Text>
                           <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
                         </react_native_1.View>)}
@@ -489,7 +622,9 @@ const ReduxDetail = react_1.default.memo(() => {
                     { label: 'In-Memory State Size', value: (0, helpers_1.getSize)(sliceData) },
                     {
                         label: 'Persistence Status',
-                        value: isPersisted ? `Persisted (${(0, helpers_1.getSize)(persistedData)})` : 'Not Persisted',
+                        value: isPersisted
+                            ? `Persisted (${(0, helpers_1.getSize)(persistedData)})`
+                            : 'Not Persisted (In-Memory)',
                     },
                     {
                         label: 'Dispatched Actions History',
@@ -520,12 +655,330 @@ const ReduxDetail = react_1.default.memo(() => {
                   </react_native_1.Text>
                 </react_native_1.TouchableOpacity>)}
             </react_native_1.View>
-          </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            <JsonViewer_1.default data={sliceTab === 'live' ? sliceData : persistedData ?? 'No persisted state stored.'} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode}/>
-          </react_native_1.ScrollView>)}
+          </react_native_1.ScrollView>) : sliceTab === 'persisted' ? (<react_native_1.View style={{ flex: 1, padding: 10 }}>
+            {isPersisted ? (<react_native_1.View style={{ flex: 1 }}>
+                <react_native_1.View style={reduxDetailStyles.persistedInfoCard}>
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }}>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                      <NetworkIcons_1.StorageIcon color={AppColors_1.AppColors.emerald700} size={14}/>
+                      <react_native_1.Text style={reduxDetailStyles.persistedInfoTitle}>
+                        Stored in persistent storage ({(0, helpers_1.getSize)(persistedData)})
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.TouchableOpacity style={reduxDetailStyles.clearPersistMiniBtn} onPress={handleClearPersistence}>
+                      <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={12}/>
+                      <react_native_1.Text style={reduxDetailStyles.clearPersistMiniText}>
+                        Clear
+                      </react_native_1.Text>
+                    </react_native_1.TouchableOpacity>
+                  </react_native_1.View>
+                </react_native_1.View>
+                <react_native_1.View style={{ flex: 1, marginTop: 8 }}>
+                  <JsonViewer_1.default data={persistedData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
+                </react_native_1.View>
+              </react_native_1.View>) : (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+                <NetworkIcons_1.StorageIcon color={AppColors_1.AppColors.grayTextWeak} size={32}/>
+                <react_native_1.Text style={reduxDetailStyles.emptyBoxTitle}>
+                  Not Persisted in Storage
+                </react_native_1.Text>
+                <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>
+                  This slice is not stored in AsyncStorage or redux-persist.
+                  State exists purely in active JavaScript memory.
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>) : (
+            /* Live State JsonViewer: Direct flex: 1 with fullHeight to prevent nested scroll conflicts */
+            <react_native_1.View style={{ flex: 1, padding: 10 }}>
+            <JsonViewer_1.default data={sliceData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
+          </react_native_1.View>)}
+      </react_native_1.View>);
+    }
+    // ══════════════════════════════════════════════════════════════════════════
+    // ── 2. RENDER ACTION DETAIL VIEW (when an action is selected directly) ────
+    // ══════════════════════════════════════════════════════════════════════════
+    if (selectedReduxAction != null) {
+        const originMeta = getOriginBadge(selectedReduxAction.originType);
+        const callerBasename = selectedReduxAction.callerFile
+            ? selectedReduxAction.callerFile.split('/').pop()
+            : null;
+        const actionTabs = [
+            {
+                key: 'payload',
+                label: t('redux.payload', 'Payload'),
+                icon: (isActive) => (<NetworkIcons_1.CodeBracketsIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'diff',
+                label: t('redux.diff', 'State Diff'),
+                icon: (isActive) => (<NetworkIcons_1.TimelineIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'stack',
+                label: t('redux.callStack', 'Call Stack'),
+                icon: (isActive) => (<NetworkIcons_1.DocIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+            },
+            {
+                key: 'raw',
+                label: 'Raw Action',
+                icon: (isActive) => (<NetworkIcons_1.LiveStateIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+            },
+        ];
+        return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+        {/* Top Info Bar */}
+        <react_native_1.View style={reduxDetailStyles.infoBar}>
+          <react_native_1.View style={reduxDetailStyles.infoTopRow}>
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                flexWrap: 'wrap',
+                flex: 1,
+                minWidth: 0,
+            }}>
+              <react_native_1.View style={reduxDetailStyles.actionBadge}>
+                <react_native_1.Text style={reduxDetailStyles.actionBadgeText}>
+                  #{selectedReduxAction.id}
+                </react_native_1.Text>
+              </react_native_1.View>
+              {/* Origin Badge */}
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                backgroundColor: originMeta.bg,
+                paddingHorizontal: 5,
+                paddingVertical: 2,
+                borderRadius: 4,
+                borderWidth: 1,
+                borderColor: originMeta.border,
+            }}>
+                {originMeta.renderIcon(originMeta.text, 8.5)}
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 8.5,
+                color: originMeta.text,
+                letterSpacing: 0.3,
+            }}>
+                  {originMeta.label}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={reduxDetailStyles.sliceNameText} numberOfLines={1}>
+                {selectedReduxAction.type}
+              </react_native_1.Text>
+              {selectedReduxAction.timestamp && (<react_native_1.View style={reduxDetailStyles.timePill}>
+                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
+                  <react_native_1.Text style={reduxDetailStyles.timeText}>
+                    {selectedReduxAction.timestamp}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+
+            {/* Copy Button */}
+            <CopyButton_1.default value={() => selectedReduxAction} label="Copy Action"/>
+          </react_native_1.View>
+
+          {/* Sub Stats Row */}
+          <react_native_1.View style={reduxDetailStyles.subStatsRow}>
+            {selectedReduxAction.affectedSlices &&
+                selectedReduxAction.affectedSlices.length > 0 && (<react_native_1.View style={[
+                    reduxDetailStyles.statPill,
+                    {
+                        backgroundColor: AppColors_1.AppColors.indigo50,
+                        borderColor: AppColors_1.AppColors.indigo400,
+                    },
+                ]}>
+                  <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.indigo600Alt} size={11}/>
+                  <react_native_1.Text style={[
+                    reduxDetailStyles.statLabel,
+                    { color: AppColors_1.AppColors.indigo600Alt },
+                ]}>
+                    Slices:
+                  </react_native_1.Text>
+                  <react_native_1.Text style={[
+                    reduxDetailStyles.statValue,
+                    { color: AppColors_1.AppColors.indigo600Alt },
+                ]}>
+                    {selectedReduxAction.affectedSlices.join(', ')}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            <react_native_1.View style={[
+                reduxDetailStyles.statPill,
+                {
+                    backgroundColor: AppColors_1.AppColors.sky100,
+                    borderColor: AppColors_1.AppColors.sky400,
+                },
+            ]}>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statLabel,
+                { color: AppColors_1.AppColors.sky600 },
+            ]}>
+                Payload Size:
+              </react_native_1.Text>
+              <react_native_1.Text style={[
+                reduxDetailStyles.statValue,
+                { color: AppColors_1.AppColors.sky600 },
+            ]}>
+                {(0, helpers_1.getSize)(selectedReduxAction.payload)}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          {/* Triggered from caller preview row */}
+          {selectedReduxAction.callerFile && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginTop: 8,
+                    paddingHorizontal: 8,
+                    paddingVertical: 4,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                }}>
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    flex: 1,
+                    minWidth: 0,
+                }}>
+                <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.sky600} size={10}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                }}>
+                  Triggered from:
+                </react_native_1.Text>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.sky600,
+                }} numberOfLines={1}>
+                  {callerBasename}:{selectedReduxAction.callerLine || 1}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.Pressable onPress={() => (0, helpers_1.openInVSCode)(selectedReduxAction.callerFile, selectedReduxAction.callerLine, selectedReduxAction.callerCol)} hitSlop={8} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: AppColors_1.AppColors.sky100,
+                    paddingHorizontal: 5,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                }}>
+                <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={9}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors_1.AppColors.sky600,
+                }}>
+                  Open in Editor
+                </react_native_1.Text>
+              </react_native_1.Pressable>
+            </react_native_1.View>)}
+
+          {/* Sub-Tabs */}
+          <SegmentedTabs_1.default tabs={actionTabs} activeKey={actionTab} onChange={key => setActionTab(key)} style={{ marginTop: 10 }}/>
+        </react_native_1.View>
+
+        {/* Content Body */}
+        {actionTab === 'payload' ? (<react_native_1.View style={{ flex: 1, padding: 10 }}>
+            {selectedReduxAction.payload !== undefined ? (<JsonViewer_1.default data={selectedReduxAction.payload} search={detailSearch} forceOpen={true} fullHeight={true} wrap={true}/>) : (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+                <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>
+                  This action has no payload dispatched.
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>) : actionTab === 'diff' ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            <DiffViewer_1.default oldData={selectedReduxAction.prevState || {}} newData={selectedReduxAction.nextState || {}} forceOpen={true}/>
+          </react_native_1.ScrollView>) : actionTab === 'stack' ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            {selectedReduxAction.stack ? (<react_native_1.View style={{
+                        backgroundColor: AppColors_1.AppColors.white,
+                        borderRadius: 10,
+                        padding: 10,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                    }}>
+                <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
+                  Dispatched from call stack:
+                </react_native_1.Text>
+                {selectedReduxAction.stack
+                        .split('\n')
+                        .map(l => l.trim())
+                        .filter(l => l.length > 0 &&
+                        !l.includes('reduxLogger') &&
+                        !l.includes('inspectorReduxMiddleware'))
+                        .map((frameLine, fIdx) => {
+                        const parsed = (0, helpers_1.parseStackLine)(frameLine, fIdx === 0);
+                        const isApp = parsed.frameType === 'app';
+                        return (<react_native_1.Pressable key={fIdx} onPress={() => {
+                                if (parsed.fileName !== 'Unknown') {
+                                    (0, helpers_1.openInVSCode)(parsed.fullPath || parsed.fileName, parsed.lineNumber, parsed.columnNumber);
+                                }
+                            }} style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                paddingVertical: 5,
+                                borderBottomWidth: 0.5,
+                                borderBottomColor: AppColors_1.AppColors.dividerColor,
+                            }}>
+                        <react_native_1.View style={{ flex: 1, minWidth: 0 }}>
+                          <react_native_1.Text style={{
+                                fontFamily: isApp
+                                    ? AppFonts_1.AppFonts.interBold
+                                    : AppFonts_1.AppFonts.interRegular,
+                                fontSize: 10.5,
+                                color: isApp
+                                    ? AppColors_1.AppColors.primaryBlack
+                                    : AppColors_1.AppColors.grayTextWeak,
+                            }} numberOfLines={1}>
+                            {parsed.functionName || 'anonymous'}
+                          </react_native_1.Text>
+                          <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interRegular,
+                                fontSize: 9,
+                                color: isApp
+                                    ? AppColors_1.AppColors.sky600
+                                    : AppColors_1.AppColors.grayTextWeak,
+                            }} numberOfLines={1}>
+                            {parsed.fileName}:{parsed.lineNumber || 1}:
+                            {parsed.columnNumber || 1}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        {isApp && (<NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={11}/>)}
+                      </react_native_1.Pressable>);
+                    })}
+              </react_native_1.View>) : (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+                <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>
+                  No call stack trace captured for this action.
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.ScrollView>) : (<react_native_1.View style={{ flex: 1, padding: 10 }}>
+            <JsonViewer_1.default data={selectedReduxAction} forceOpen={true} fullHeight={true} wrap={true}/>
+          </react_native_1.View>)}
       </react_native_1.View>);
     }
-    return null;
+    return (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+      <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
+      <react_native_1.Text style={reduxDetailStyles.emptyBoxTitle}>
+        No Redux Slice Selected
+      </react_native_1.Text>
+      <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>
+        Select a slice from the Redux tab to inspect its state and dispatched
+        actions.
+      </react_native_1.Text>
+    </react_native_1.View>);
 });
 const reduxDetailStyles = react_native_1.StyleSheet.create({
     infoBar: {
@@ -541,20 +994,21 @@ const reduxDetailStyles = react_native_1.StyleSheet.create({
         marginBottom: 8,
     },
     methodBadge: {
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 6,
+        paddingHorizontal: 7,
+        paddingVertical: 2.5,
+        borderRadius: 5,
     },
     methodBadgeText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
+        fontSize: 9.5,
         color: AppColors_1.AppColors.white,
-        letterSpacing: 0.5,
+        letterSpacing: 0.4,
     },
     sliceNameText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 14,
         color: AppColors_1.AppColors.primaryBlack,
+        flexShrink: 1,
     },
     persistedChip: {
         flexDirection: 'row',
@@ -639,6 +1093,11 @@ const reduxDetailStyles = react_native_1.StyleSheet.create({
         marginBottom: 8,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        elevation: 1,
     },
     timelineHeader: {
         flexDirection: 'row',
@@ -702,7 +1161,7 @@ const reduxDetailStyles = react_native_1.StyleSheet.create({
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 11,
         color: AppColors_1.AppColors.grayTextStrong,
-        marginBottom: 4,
+        marginBottom: 6,
     },
     metadataCard: {
         backgroundColor: AppColors_1.AppColors.white,
@@ -710,6 +1169,11 @@ const reduxDetailStyles = react_native_1.StyleSheet.create({
         padding: 12,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        elevation: 1,
     },
     metaRow: {
         flexDirection: 'row',
@@ -731,6 +1195,32 @@ const reduxDetailStyles = react_native_1.StyleSheet.create({
         maxWidth: '60%',
         textAlign: 'right',
     },
+    persistedInfoCard: {
+        backgroundColor: '#ECFDF5',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#A7F3D0',
+        padding: 10,
+    },
+    persistedInfoTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: '#047857',
+    },
+    clearPersistMiniBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: '#FEE2E2',
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 4,
+    },
+    clearPersistMiniText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.errorColor,
+    },
     clearPersistBtn: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -756,11 +1246,20 @@ const reduxDetailStyles = react_native_1.StyleSheet.create({
         justifyContent: 'center',
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
+        margin: 12,
+        gap: 8,
+    },
+    emptyBoxTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
     },
     emptyBoxText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 12.5,
+        fontSize: 12,
         color: AppColors_1.AppColors.grayTextWeak,
+        textAlign: 'center',
+        lineHeight: 18,
     },
     highlight: {
         backgroundColor: '#FEF08A',