fix: tweak styles for mobile

frontend/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,50 @@
+import { component$ } from "@builder.io/qwik";
+
+interface BreadcrumbProps {
+  current: string;
+}
+
+export const Breadcrumb = component$<BreadcrumbProps>(({ current }) => {
+  return (
+    <nav
+      class="-mx-2.5 b-3 border-black"
+      style={{
+        marginBottom: "10px",
+        padding: "10px",
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontSize: "14px",
+      }}
+    >
+      <a
+        href="/"
+        class="no-underline hover:underline"
+        style={{
+          color: "#0066cc",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        Demo
+      </a>
+      <span style={{ color: "#999", display: "flex", alignItems: "center" }}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m9 18 6-6-6-6"></path>
+        </svg>
+      </span>
+      <span style={{ color: "#666" }}>{current}</span>
+    </nav>
+  );
+});

frontend/src/components/debug-panel/debug-panel.tsx

@@ -119,14 +119,14 @@ export const DebugPanel = component$<DebugPanelProps>(
 
         {/* Debug panel */}
         {isOpen.value && (
-          <div class="fixed top-0 right-0 bottom-0 w-[500px] bg-white border-l border-gray-300 shadow-lg flex flex-col z-[999]">
+          <div class="fixed top-0 right-0 bottom-0 w-full max-w-[500px] bg-white border-l border-gray-300 shadow-lg flex flex-col z-[999]">
             <h2 class="m-0 px-5 py-4 text-lg border-b border-gray-200 bg-gray-50">
               Debug: Salience Score Breakdown
             </h2>
 
             {/* Controls */}
             <div class="px-5 py-3 border-b border-gray-200 bg-gray-50">
-              <div class="flex gap-4 items-center text-xs mb-2">
+              <div class="flex flex-wrap gap-4 items-center text-xs mb-2">
                 <div class="flex items-center gap-2">
                   <label class="text-gray-700 font-semibold">Exponent:</label>
                   <input

frontend/src/global.css

@@ -23,20 +23,20 @@ h1 .subtitle {
   font-weight: normal;
   color: #a0a0a0;
 }
-h1 .about-link {
+.about-link {
   display: block;
-  font-size: 0.6em;
   font-weight: normal;
   color: #1565c0;
   text-decoration: none;
   margin-top: 8px;
 }
-h1 .about-link:hover {
+.about-link:hover {
   text-decoration: underline;
 }
 .controls {
   margin: 15px 0;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 10px;
 }
@@ -106,3 +106,17 @@ h1 .about-link:hover {
   display: inline-block;
   vertical-align: middle;
 }
+
+/* Mobile styles */
+@media (max-width: 640px) {
+  .container {
+    padding: 15px 0;
+  }
+  .container > *:not(.editor) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .editor {
+    box-shadow: none;
+  }
+}

frontend/src/routes/about/index.mdx

@@ -3,6 +3,9 @@ title: How Salience Works
 ---
 
 import { Math } from "~/components/math/math"
+import { Breadcrumb } from "~/components/breadcrumb/breadcrumb"
+
+<a href="../" class="about-link">← Back to Demo</a>
 
 # How Salience Works
 
@@ -12,22 +15,49 @@ was quite neat how someone well armed with math can take sentence embeddings
 and determine the significance of all sentences in a document in fewer lines of
 code than my introduction paragraph here.
 
-This is not a description of [all the changes I made and extra book-keeping involved to turn Matt's script into a proper web app demo](/grunt-work).
+Salience highlights important sentences by treating your document as a graph
+where sentences that talk about similar things are connected. We then figure
+out which sentences are most "central" to the document's themes.
 
-This post is an outsider's view of how Matt's salience code works. If you're
+**This is not** a description of [all the changes I made and extra book-keeping
-already working with ML models in Python, this will feel torturously detailed.
+involved to turn Matt's script into a proper web app demo](./grunt-work).
 
-My interest in this overly detailed style is, the equations a ML engineer would doodle out, the element by element matrix operations to give you feel for the dataflow, and the numpy code that implements it.
+Warning! This post is an outsider's view of how Matt's salience code works. If
+you're already working with ML models in Python, this will feel torturously
+detailed.
 
-When you see `sims /= norms.T` in numpy, I want to explain the matrix dimensions
+I'm thinking that for someone fluent in this stuff, they see a lot more than
+just Matt's few dozen lines of code. They'll see the underlying equation, the
+shape of the matrices, how the data is laid out in memory, and **crucially**
+the alternatives. They see this is a graph problem. And then they're flipping
+through a mental catalog: random walks, spectral decomposition, diffusion,
+flow-based methods. Asking which one applies, what assumptions each makes, and
+whether the data is close enough to satisfy them.  If not, maybe you
+aproximate, linearize, symmetrize, or threshold until it does. Knowing the
+toolkit and knowing when to bend the rules All of this is available to them
+effortlessly, automatically, without conscious thought.
 
+I remember when I first learned Haskell. Reading the code was slow! I had to
+think quite a bit about what I was looking at. Then after about month,
+something clicked. I could suddenly read Haskell like English or C++. The
+translation became effortless, almost invisible.
 
-I wrote this for the rest of us old world programmers: compilers, networking, systems programming looking at
+I would bet my last donut the same thing can happen to you with numpy and and
-C++/Go/Rust, or the poor souls in the frontend Typescript mines.
+ML papers. At some point, fluency kicks in. You will read the equations an ML
-For us refugees of the barbarian past, the tooling and notation can look foreign. I wanted to walk through the math and
+engineer would doodle out, intinctively have a feel for the dataflow, the
-numpy operations in detail to show what's actually happening with the data.
+element by element matrix operations under the hood, while simultaneously
+seeing in your mind's eye the equivalent high level numpy code.
 
-Salience highlights important sentences by treating your document as a graph where sentences that talk about similar things are connected. We then figure out which sentences are most "central" to the document's themes.
+Today I'm going to show you the equation, the matching source code, and the
+alternative theorem/algorithms/tricks you could have deployed at each step.
+I'll explain things that will seem painfully obvious to experts: *this is a
+matrix multiplication—how many rows? how many columns? what's the shape of the
+output?* That level of detail.
+
+I'm essentially narrating the day-jobbers' automatic, subconscious
+processes. I hope laying out all the alternate forms (showing the choices, the
+reasons, the mental links between code and math) brings you one step closer to
+fluency.
 
 ## Step 1: Break Text into Sentences
 
@@ -265,4 +295,4 @@ For each document, I use a simple 1D solver to find <Math tex="p" /> and <Math t
 
 ---
 
-[← Back to App](/)
+<a href="../" class="about-link">← Back to Demo</a>

frontend/src/routes/index.tsx

@@ -319,8 +319,8 @@ export default component$(() => {
           <span class="subtitle">
             sentence highlights based on their significance to the document
           </span>
-          <a href="./about" class="about-link">How it works →</a>
         </h1>
+        <a href="./about" class="about-link text-sm">How it works →</a>
         <div class="controls">
           <label for="model-select">Model:</label>
           <select