fix(app): size file preview gutter to fit 3-digit line numbers (#592)

The gutter width formula was calibrated for the diff pane's 12px font,
so 3-digit numbers wrapped to two lines in the file preview's 14px
gutter. Parameterize on font size and add numberOfLines={1} as a guard.

packages/app/src/components/file-pane.tsx

@@ -112,7 +112,9 @@ const CodeLine = React.memo(function CodeLine({
   return (
     <View style={codeLineStyles.line}>
       <View style={gutterStyle}>
-        <Text style={gutterTextStyle}>{String(lineNumber)}</Text>
+        <Text numberOfLines={1} style={gutterTextStyle}>
+          {String(lineNumber)}
+        </Text>
       </View>
       <Text selectable style={codeLineStyles.lineText}>
         {keyedTokens.map(({ key, token }) => (
@@ -193,8 +195,8 @@ function FilePreviewBody({
 
   const gutterWidth = useMemo(() => {
     if (!highlightedLines) return 0;
-    return lineNumberGutterWidth(highlightedLines.length);
-  }, [highlightedLines]);
+    return lineNumberGutterWidth(highlightedLines.length, theme.fontSize.sm);
+  }, [highlightedLines, theme.fontSize.sm]);
 
   const imageSource = useMemo(
     () => (imagePreviewUri ? { uri: imagePreviewUri } : null),