react-native-network-lens 0.1.0 → 0.2.0

package/lib/typescript/src/components/RequestList/RequestList.d.ts

@@ -1,4 +1,3 @@
-import { type ReactNode } from 'react';
 import type NetworkRequest from '../../core/NetworkRequest.js';
 import { type ActionItem } from '../ui/index.js';
 interface Props {
@@ -10,9 +9,7 @@ interface Props {
     loggingEnabled: boolean;
     onPressItem: (id: string) => void;
     menuActions: ActionItem[];
-    /** Optional row rendered above the search bar (used by the overlay for title + close). */
-    header?: ReactNode;
 }
-declare const RequestList: ({ requests, sort, compact, maxRows, paused, loggingEnabled, onPressItem, menuActions, header, }: Props) => import("react").JSX.Element;
+declare const RequestList: ({ requests, sort, compact, maxRows, paused, loggingEnabled, onPressItem, menuActions, }: Props) => import("react").JSX.Element;
 export default RequestList;
 //# sourceMappingURL=RequestList.d.ts.map

package/lib/typescript/src/components/RequestList/RequestList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestList.d.ts","sourceRoot":"","sources":["../../../../../src/components/RequestList/RequestList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,cAAc,MAAM,8BAA2B,CAAC;AAG5D,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAO,CAAC;AAYf,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,0FAA0F;IAC1F,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAWD,QAAA,MAAM,WAAW,GAAI,iGAUlB,KAAK,gCAyJP,CAAC;AAiBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RequestList.d.ts","sourceRoot":"","sources":["../../../../../src/components/RequestList/RequestList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,8BAA2B,CAAC;AAG5D,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAO,CAAC;AAYf,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAWD,QAAA,MAAM,WAAW,GAAI,yFASlB,KAAK,gCAwJP,CAAC;AAiBF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/components/ui/Button.d.ts

@@ -4,10 +4,12 @@ interface TextButtonProps {
     onPress?: () => void;
     disabled?: boolean;
     active?: boolean;
+    /** Text-only button in the primary colour, for navigation actions like Back. */
+    plain?: boolean;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
 }
-export declare const TextButton: ({ label, onPress, disabled, active, style, textStyle, }: TextButtonProps) => import("react").JSX.Element;
+export declare const TextButton: ({ label, onPress, disabled, active, plain, style, textStyle, }: TextButtonProps) => import("react").JSX.Element;
 interface IconButtonProps {
     /** A unicode glyph; the library ships no image assets. */
     glyph: string;

package/lib/typescript/src/components/ui/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,yDAOxB,eAAe,gCA8BjB,CAAC;AAEF,UAAU,eAAe;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,GAAI,2DAMxB,eAAe,gCAyBjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,gEAQxB,eAAe,gCAsCjB,CAAC;AAEF,UAAU,eAAe;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,GAAI,2DAMxB,eAAe,gCAyBjB,CAAC"}

package/lib/typescript/src/components/ui/Pill.d.ts

@@ -6,6 +6,7 @@ interface Props {
     small?: boolean;
     style?: StyleProp<ViewStyle>;
 }
+/** Fixed-height badge so filled and outlined variants align on one row. */
 export declare const Pill: ({ label, color, filled, small, style }: Props) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Pill.d.ts.map

package/lib/typescript/src/components/ui/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,IAAI,GAAI,wCAAwC,KAAK,gCAqBjE,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,2EAA2E;AAC3E,eAAO,MAAM,IAAI,GAAI,wCAAwC,KAAK,gCAqBjE,CAAC"}

package/lib/typescript/src/settings.d.ts

@@ -0,0 +1,18 @@
+import type { Theme } from './theme.js';
+/**
+ * Tiny in-memory preferences shared by every viewer in the session, e.g. the
+ * code font scale the user picks with the "Aa" button.
+ */
+export type CodeFontScale = 'small' | 'medium' | 'large';
+export declare const setCodeFontScale: (next: CodeFontScale) => void;
+export declare const cycleCodeFontScale: () => void;
+export declare const useCodeFontScale: () => CodeFontScale;
+/** Font metrics for code views: the theme's base size times the chosen scale. */
+export declare const useCodeFont: (theme: Theme) => {
+    scale: CodeFontScale;
+    fontSize: number;
+    lineHeight: number;
+    /** Average glyph advance for monospace fonts; used to size horizontal scroll areas. */
+    charWidth: number;
+};
+//# sourceMappingURL=settings.d.ts.map

package/lib/typescript/src/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../src/settings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAErC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAoBzD,eAAO,MAAM,gBAAgB,GAAI,MAAM,aAAa,SAInD,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAI9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,aACiB,CAAC;AAEtD,iFAAiF;AACjF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK;;;;IAQpC,uFAAuF;;CAG1F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-network-lens",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "In-app HTTP network inspector for React Native with a tabbed request viewer, collapsible JSON tree, search and zero dependencies",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -88,8 +88,8 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.83.0"
+    "react": ">=18.0.0",
+    "react-native": ">=0.69.0"
   },
   "workspaces": [
     "example"

package/src/components/BodyViewer.tsx

@@ -6,12 +6,13 @@ import { bodySize, stringifyJson } from '../utils/body';
 import { formatBytes } from '../utils/format';
 import JsonTreeView, { type JsonTreeHandle } from './JsonTree/JsonTreeView';
 import RawTextView from './RawTextView';
+import { cycleCodeFontScale, useCodeFontScale } from '../settings';
 import {
   ActionSheet,
   EmptyState,
+  IconButton,
   SearchInput,
   SegmentedControl,
-  TextButton,
 } from './ui';
 
 type ViewMode = 'tree' | 'raw';
@@ -60,6 +61,8 @@ const BodyViewer = ({
     value: unknown;
   } | null>(null);
   const treeRef = useRef<JsonTreeHandle>(null);
+  const [menuVisible, setMenuVisible] = useState(false);
+  const fontScale = useCodeFontScale();
 
   const effectiveMode: ViewMode = structured ? mode : 'raw';
 
@@ -122,22 +125,16 @@ const BodyViewer = ({
           </Text>
         )}
         <View style={styles.spacer} />
-        {effectiveMode === 'tree' && (
-          <>
-            <TextButton
-              label="Expand"
-              onPress={() => treeRef.current?.expandAll()}
-            />
-            <TextButton
-              label="Collapse"
-              onPress={() => treeRef.current?.collapseAll()}
-            />
-          </>
-        )}
-        {copyToClipboard && body.kind !== 'binary' && (
-          <TextButton label="Copy" onPress={() => copyToClipboard(body.text)} />
-        )}
-        <TextButton label="Share" onPress={() => share(body.text)} />
+        <IconButton
+          glyph="Aa"
+          accessibilityLabel={`Text size: ${fontScale}. Tap to change`}
+          onPress={cycleCodeFontScale}
+        />
+        <IconButton
+          glyph="⋮"
+          accessibilityLabel="More options"
+          onPress={() => setMenuVisible(true)}
+        />
       </View>
       {body.kind !== 'binary' && (
         <SearchInput
@@ -183,6 +180,28 @@ const BodyViewer = ({
           />
         )}
       </View>
+      <ActionSheet
+        visible={menuVisible}
+        onClose={() => setMenuVisible(false)}
+        actions={[
+          ...(effectiveMode === 'tree'
+            ? [
+                {
+                  label: 'Expand all',
+                  onPress: () => treeRef.current?.expandAll(),
+                },
+                {
+                  label: 'Collapse all',
+                  onPress: () => treeRef.current?.collapseAll(),
+                },
+              ]
+            : []),
+          ...(copyToClipboard && body.kind !== 'binary'
+            ? [{ label: 'Copy', onPress: () => copyToClipboard(body.text) }]
+            : []),
+          { label: 'Share', onPress: () => share(body.text) },
+        ]}
+      />
       <ActionSheet
         visible={nodeMenu !== null}
         onClose={() => setNodeMenu(null)}
@@ -227,9 +246,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 12,
     paddingTop: 10,
-    gap: 6,
   },
-  modeSwitch: { width: 130 },
+  modeSwitch: { width: 140 },
   spacer: { flex: 1 },
   search: { marginHorizontal: 12, marginTop: 8 },
   meta: { fontSize: 12, flexShrink: 1 },

package/src/components/JsonTree/JsonTreeView.tsx

@@ -8,6 +8,7 @@ import {
   useState,
 } from 'react';
 import { Pressable, StyleSheet, Text } from 'react-native';
+import { useCodeFont } from '../../settings';
 import { useTheme, type Theme } from '../../theme';
 import { splitHighlights } from '../../utils/search';
 import { CodeList } from '../CodeList';
@@ -58,6 +59,7 @@ const JsonTreeView = forwardRef<JsonTreeHandle, Props>(
     ref
   ) {
     const theme = useTheme();
+    const font = useCodeFont(theme);
     const [expanded, setExpanded] = useState<Set<string>>(() =>
       pathsToDepth(value, initialDepth)
     );
@@ -118,8 +120,8 @@ const JsonTreeView = forwardRef<JsonTreeHandle, Props>(
       let maxChars = 0;
       for (const row of rows)
         maxChars = Math.max(maxChars, rowCharCount(row, INDENT_CHARS));
-      return maxChars * theme.sizes.codeFontSize * 0.62 + 40;
-    }, [rows, theme.sizes.codeFontSize]);
+      return maxChars * font.charWidth + 40;
+    }, [rows, font.charWidth]);
 
     const toggle = useCallback((row: JsonRow) => {
       setExpanded((prev) => {
@@ -135,13 +137,14 @@ const JsonTreeView = forwardRef<JsonTreeHandle, Props>(
       });
     }, []);
 
-    const rowHeight = theme.sizes.codeLineHeight + 4;
+    const rowHeight = font.lineHeight + 4;
 
     const renderItem = useCallback(
       ({ item }: { item: JsonRow }) => (
         <TreeRow
           row={item}
           theme={theme}
+          font={font}
           query={query}
           matched={matchedPaths.has(item.path)}
           active={item.path === activePath}
@@ -152,6 +155,7 @@ const JsonTreeView = forwardRef<JsonTreeHandle, Props>(
       ),
       [
         theme,
+        font,
         query,
         matchedPaths,
         activePath,
@@ -180,6 +184,7 @@ const keyExtractor = (row: JsonRow) => row.path;
 const TreeRow = memo(function TreeRowInner({
   row,
   theme,
+  font,
   query,
   matched,
   active,
@@ -189,6 +194,7 @@ const TreeRow = memo(function TreeRowInner({
 }: {
   row: JsonRow;
   theme: Theme;
+  font: ReturnType<typeof useCodeFont>;
   query: string;
   matched: boolean;
   active: boolean;
@@ -198,8 +204,8 @@ const TreeRow = memo(function TreeRowInner({
 }) {
   const codeStyle = {
     fontFamily: theme.fonts.mono,
-    fontSize: theme.sizes.codeFontSize,
-    lineHeight: theme.sizes.codeLineHeight,
+    fontSize: font.fontSize,
+    lineHeight: font.lineHeight,
   };
   const valueColor = (() => {
     switch (row.type) {

package/src/components/JsonTree/model.ts

@@ -260,5 +260,7 @@ export const MAX_VALUE_CHARS = 400;
 
 export const displayValue = (value: unknown): string => {
   if (typeof value === 'string') return `"${value}"`;
+  if (Array.isArray(value)) return '[]'; // only empty arrays reach here
+  if (value && typeof value === 'object') return '{}'; // only empty objects reach here
   return primitiveText(value);
 };

package/src/components/NetworkLens.tsx

@@ -5,7 +5,6 @@ import {
   useImperativeHandle,
   useMemo,
   useState,
-  type ReactNode,
 } from 'react';
 import { BackHandler, Share, StyleSheet, View } from 'react-native';
 import { setLensBackHandler } from '../backHandler';
@@ -40,8 +39,6 @@ export interface NetworkLensProps {
    * `copyToClipboard={Clipboard.setString}`.
    */
   copyToClipboard?: (text: string) => void;
-  /** Rendered above the request list's search bar (the overlay uses it for its title bar). */
-  header?: ReactNode;
 }
 
 export interface NetworkLensHandle {
@@ -58,7 +55,6 @@ const NetworkLens = forwardRef<NetworkLensHandle, NetworkLensProps>(
       compact = false,
       maxRows,
       copyToClipboard,
-      header,
     },
     ref
   ) {
@@ -71,7 +67,6 @@ const NetworkLens = forwardRef<NetworkLensHandle, NetworkLensProps>(
           compact={compact}
           maxRows={maxRows}
           copyToClipboard={copyToClipboard}
-          header={header}
         />
       </ThemeContext.Provider>
     );
@@ -79,13 +74,10 @@ const NetworkLens = forwardRef<NetworkLensHandle, NetworkLensProps>(
 );
 
 type InspectorProps = Required<Pick<NetworkLensProps, 'sort' | 'compact'>> &
-  Pick<NetworkLensProps, 'maxRows' | 'copyToClipboard' | 'header'>;
+  Pick<NetworkLensProps, 'maxRows' | 'copyToClipboard'>;
 
 const Inspector = forwardRef<NetworkLensHandle, InspectorProps>(
-  function InspectorInner(
-    { sort, compact, maxRows, copyToClipboard, header },
-    ref
-  ) {
+  function InspectorInner({ sort, compact, maxRows, copyToClipboard }, ref) {
     const theme = useTheme();
     const requests = useNetworkRequests();
     const loggingEnabled = useLoggerEnabled();
@@ -163,7 +155,6 @@ const Inspector = forwardRef<NetworkLensHandle, InspectorProps>(
             loggingEnabled={loggingEnabled}
             onPressItem={setSelectedId}
             menuActions={menuActions}
-            header={header}
           />
         )}
       </View>

package/src/components/NetworkLensOverlay.tsx

@@ -11,15 +11,16 @@ import {
 } from 'react-native';
 import { useLoggerEnabled, useNetworkRequests } from '../hooks';
 import { ThemeContext, useTheme, type ThemeInput } from '../theme';
+
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
 import NetworkLens, {
   type NetworkLensHandle,
   type NetworkLensProps,
 } from './NetworkLens';
-import { IconButton } from './ui';
 
 export interface NetworkLensOverlayProps extends Omit<
   NetworkLensProps,
-  'enabled' | 'theme' | 'header'
+  'enabled' | 'theme'
 > {
   /**
    * Render nothing when `false`, e.g.
@@ -88,17 +89,6 @@ const Overlay = ({
     [position.endsWith('right') ? 'right' : 'left']: offset?.x ?? 16,
   };
 
-  const header = (
-    <View style={styles.header}>
-      <Text style={[styles.title, { color: t.colors.text }]}>{title}</Text>
-      <IconButton
-        glyph="✕"
-        accessibilityLabel="Close network inspector"
-        onPress={() => setOpen(false)}
-      />
-    </View>
-  );
-
   return (
     <>
       {!hideButton && (
@@ -135,12 +125,43 @@ const Overlay = ({
         }}
       >
         <View style={[styles.sheet, { backgroundColor: t.colors.surface }]}>
-          <NetworkLens
-            ref={lensRef}
-            {...lensProps}
-            theme={theme}
-            header={header}
-          />
+          <View
+            style={[
+              styles.header,
+              {
+                backgroundColor: t.colors.surface,
+                borderBottomColor: t.colors.border,
+              },
+            ]}
+          >
+            <View style={styles.headerSide} />
+            <Text
+              style={[styles.title, { color: t.colors.text }]}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            <View style={styles.headerSide}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="Close network inspector"
+                onPress={() => setOpen(false)}
+                hitSlop={HIT_SLOP}
+                style={({ pressed }) => [
+                  styles.close,
+                  { backgroundColor: t.colors.surfaceAlt },
+                  pressed && styles.pressed,
+                ]}
+              >
+                <Text
+                  style={[styles.closeGlyph, { color: t.colors.textMuted }]}
+                >
+                  ✕
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+          <NetworkLens ref={lensRef} {...lensProps} theme={theme} />
         </View>
       </Modal>
     </>
@@ -175,13 +196,23 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0,
   },
   header: {
+    height: 52,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingLeft: 8,
-    paddingBottom: 6,
+    paddingHorizontal: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerSide: { width: 44, alignItems: 'flex-end', justifyContent: 'center' },
+  title: { flex: 1, textAlign: 'center', fontSize: 17, fontWeight: '600' },
+  close: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  title: { fontSize: 17, fontWeight: '700' },
+  closeGlyph: { fontSize: 15, fontWeight: '700' },
+  pressed: { opacity: 0.6 },
 });
 
 export default NetworkLensOverlay;

package/src/components/RawTextView.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { useCodeFont } from '../settings';
 import { useTheme, type Theme } from '../theme';
 import { findLineMatches, splitHighlights, toLines } from '../utils/search';
 import { CodeList } from './CodeList';
@@ -22,6 +23,7 @@ const RawTextView = ({
   onMatchCountChange,
 }: Props) => {
   const theme = useTheme();
+  const font = useCodeFont(theme);
   const lines = useMemo(() => toLines(text), [text]);
   const matches = useMemo(() => findLineMatches(lines, query), [lines, query]);
 
@@ -37,14 +39,14 @@ const RawTextView = ({
     matches[Math.min(activeMatch, Math.max(matches.length - 1, 0))]?.line;
 
   const gutterChars = String(lines.length).length;
-  const charWidth = theme.sizes.codeFontSize * 0.62;
+  const charWidth = font.charWidth;
   const contentWidth = useMemo(() => {
     let max = 0;
     for (const line of lines) if (line.length > max) max = line.length;
     return (max + gutterChars + 3) * charWidth + 32;
   }, [lines, gutterChars, charWidth]);
 
-  const rowHeight = theme.sizes.codeLineHeight;
+  const rowHeight = font.lineHeight;
 
   const renderItem = useCallback(
     ({ item, index }: { item: string; index: number }) => (
@@ -53,13 +55,14 @@ const RawTextView = ({
         index={index}
         gutterChars={gutterChars}
         theme={theme}
+        font={font}
         query={query}
         matched={matchedLines.has(index)}
         active={index === activeLine}
         height={rowHeight}
       />
     ),
-    [gutterChars, theme, query, matchedLines, activeLine, rowHeight]
+    [gutterChars, theme, font, query, matchedLines, activeLine, rowHeight]
   );
 
   return (
@@ -82,6 +85,7 @@ const Line = React.memo(function LineInner({
   index,
   gutterChars,
   theme,
+  font,
   query,
   matched,
   active,
@@ -91,6 +95,7 @@ const Line = React.memo(function LineInner({
   index: number;
   gutterChars: number;
   theme: Theme;
+  font: ReturnType<typeof useCodeFont>;
   query: string;
   matched: boolean;
   active: boolean;
@@ -98,8 +103,8 @@ const Line = React.memo(function LineInner({
 }) {
   const codeStyle = {
     fontFamily: theme.fonts.mono,
-    fontSize: theme.sizes.codeFontSize,
-    lineHeight: theme.sizes.codeLineHeight,
+    fontSize: font.fontSize,
+    lineHeight: font.lineHeight,
   };
   const segments = matched ? splitHighlights(text, query) : null;
   return (
@@ -120,7 +125,7 @@ const Line = React.memo(function LineInner({
           styles.gutter,
           {
             color: theme.colors.textMuted,
-            width: (gutterChars + 1) * theme.sizes.codeFontSize * 0.62 + 8,
+            width: (gutterChars + 1) * font.charWidth + 8,
           },
         ]}
       >

package/src/components/RequestDetails/RequestDetails.tsx

@@ -18,7 +18,6 @@ import {
 } from '../../utils/format';
 import BodyViewer from '../BodyViewer';
 import {
-  IconButton,
   KeyValueList,
   Pill,
   Section,
@@ -76,27 +75,32 @@ const RequestDetails = ({ request, onClose, copyToClipboard }: Props) => {
           },
         ]}
       >
-        <View style={styles.headerRow}>
+        <View style={styles.navRow}>
+          <TextButton
+            label="‹ Back"
+            onPress={onClose}
+            plain
+            style={styles.back}
+            textStyle={styles.backLabel}
+          />
+          <Text
+            style={[styles.summary, { color: theme.colors.textMuted }]}
+            numberOfLines={1}
+          >
+            {summary}
+          </Text>
+        </View>
+        <View style={styles.pillRow}>
           <Pill
             label={request.method}
             color={methodColor(theme, request.method)}
             filled
+            style={styles.headerPill}
           />
           <Pill
             label={statusLabel(request)}
             color={statusColor(theme, request.status, failed)}
           />
-          <Text
-            style={[styles.summary, { color: theme.colors.textMuted }]}
-            numberOfLines={1}
-          >
-            {summary}
-          </Text>
-          <IconButton
-            glyph="✕"
-            accessibilityLabel="Back to list"
-            onPress={onClose}
-          />
         </View>
         <Pressable
           onPress={() => setUrlExpanded((v) => !v)}
@@ -292,21 +296,29 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  headerRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
-  summary: { flex: 1, fontSize: 12, fontVariant: ['tabular-nums'] },
+  navRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginLeft: -8,
+  },
+  back: { paddingHorizontal: 8, paddingVertical: 4 },
+  backLabel: { fontSize: 16 },
+  pillRow: { flexDirection: 'row', alignItems: 'center', marginTop: 6 },
+  headerPill: { marginRight: 8 },
+  summary: { flexShrink: 1, fontSize: 12, fontVariant: ['tabular-nums'] },
   url: { fontSize: 14, marginTop: 8, lineHeight: 19 },
   gql: { fontSize: 12, marginTop: 4, fontWeight: '600' },
   tabs: { marginTop: 10 },
   overview: { paddingBottom: 24 },
-  sectionActions: { flexDirection: 'row', gap: 6 },
-  smallButton: { paddingVertical: 3, paddingHorizontal: 8 },
+  sectionActions: { flexDirection: 'row' },
+  smallButton: { paddingVertical: 3, paddingHorizontal: 8, marginLeft: 6 },
   exportRow: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 8,
     paddingVertical: 8,
   },
-  exportButton: { paddingVertical: 8 },
+  exportButton: { paddingVertical: 8, marginRight: 8, marginBottom: 8 },
   footer: { textAlign: 'center', fontSize: 11, marginTop: 20 },
 });
 

package/src/components/RequestList/FilterBar.tsx

@@ -155,8 +155,8 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     letterSpacing: 0.5,
   },
-  chips: { paddingRight: 12, gap: 6 },
-  chip: { paddingVertical: 4, paddingHorizontal: 10 },
+  chips: { paddingRight: 12 },
+  chip: { paddingVertical: 4, paddingHorizontal: 10, marginRight: 6 },
   clear: {
     alignSelf: 'flex-end',
     marginRight: 12,