Pi Web fork: file viewer code at 12px on an 18px line

piweb/hf-design.patch

@@ -9387,7 +9387,7 @@ index b46d21a..8a8b640 100644
  
  export function FolderIcon({ size = 14, open = false }: IconProps & { open?: boolean }) {
 diff --git a/components/FileViewer.tsx b/components/FileViewer.tsx
-index 9426211..5f0943f 100644
+index 9426211..ce8ff16 100644
 --- a/components/FileViewer.tsx
 +++ b/components/FileViewer.tsx
 @@ -6,6 +6,7 @@ import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/prism-light";
@@ -9407,7 +9407,26 @@ index 9426211..5f0943f 100644
  
  export type { FileViewerState } from "@/lib/file-viewer-state";
  
-@@ -81,12 +84,14 @@ const FILE_CODE_STYLE: CSSProperties = {
+@@ -69,11 +72,16 @@ const DISPLAY_MODE_LABELS: Record<DisplayMode, string> = {
+   diff: "Diff",
+ };
+ 
++// Code in the file viewer (source, diff, large files): 12px on an 18px line, compact
++// and still easy to read; the line numbers keep the same 18px rhythm.
++const FILE_CODE_FONT_SIZE = 12;
++const FILE_CODE_LINE_HEIGHT = "18px";
++
+ const FILE_CODE_STYLE: CSSProperties = {
+   fontFamily: "var(--font-mono)",
+   fontWeight: "var(--font-mono-weight)",
+-  fontSize: 13,
+-  lineHeight: 1.6,
++  fontSize: FILE_CODE_FONT_SIZE,
++  lineHeight: FILE_CODE_LINE_HEIGHT,
+ };
+ 
+ // Prism's light theme colors <pre> with backgroundColor, its dark theme with
+@@ -81,12 +89,14 @@ const FILE_CODE_STYLE: CSSProperties = {
  // dark theme's shorthand is dropped, as CodeBlock does: a theme switch then never
  // makes React remove one beside the other (it warned, and the view lost its
  // background).
@@ -9424,7 +9443,16 @@ index 9426211..5f0943f 100644
  delete fileViewerDarkTheme['pre[class*="language-"]'].background;
  
  const FILE_LINE_NUMBER_STYLE: CSSProperties = {
-@@ -119,10 +124,7 @@ interface SelectedLineRange {
+@@ -102,7 +112,7 @@ const FILE_LINE_NUMBER_STYLE: CSSProperties = {
+   fontSize: 11,
+   fontStyle: "normal",
+   fontVariantNumeric: "tabular-nums",
+-  lineHeight: "20.8px",
++  lineHeight: FILE_CODE_LINE_HEIGHT,
+   userSelect: "none",
+   flexShrink: 0,
+   verticalAlign: "top",
+@@ -119,10 +129,7 @@ interface SelectedLineRange {
  
  function MentionIcon() {
    return (
@@ -9436,7 +9464,7 @@ index 9426211..5f0943f 100644
    );
  }
  
-@@ -252,11 +254,7 @@ function DownloadLink({ filePath, sourceSessionId }: { filePath: string; sourceS
+@@ -252,11 +259,7 @@ function DownloadLink({ filePath, sourceSessionId }: { filePath: string; sourceS
        aria-label={t("i18n.downloadFile")}
        className="file-viewer-icon-button"
      >
@@ -9449,7 +9477,7 @@ index 9426211..5f0943f 100644
      </a>
    );
  }
-@@ -1442,7 +1440,7 @@ function TextFileViewer({
+@@ -1442,7 +1445,7 @@ function TextFileViewer({
        <SyntaxHighlighter
          className={wrapLines ? "file-source-view is-wrapped" : "file-source-view"}
          language={language === "text" || !prismReady ? "plaintext" : language}
@@ -9458,7 +9486,7 @@ index 9426211..5f0943f 100644
          showLineNumbers
          lineNumberStyle={{
            ...FILE_LINE_NUMBER_STYLE,
-@@ -1708,12 +1706,7 @@ function TextFileViewer({
+@@ -1708,12 +1711,7 @@ function TextFileViewer({
                      color: wrapLines ? "var(--text)" : "var(--text-muted)",
                    }}
                  >
@@ -9472,7 +9500,7 @@ index 9426211..5f0943f 100644
                  </button>
                </>
              )}
-@@ -1733,7 +1726,7 @@ function TextFileViewer({
+@@ -1733,7 +1731,7 @@ function TextFileViewer({
              gap: 10,
              padding: "5px 8px",
              border: "1px solid var(--border)",