Optimize docs page for phone: wrap table cells, tighten on small screens

frontend/src/pages/datasets/ProteinDocsPage.css

@@ -108,3 +108,46 @@
 .markdown-body li {
   margin: 0.3rem 0;
 }
+
+/* Let table cells (and inline code, e.g. column names like `cath_superfamily`)
+   wrap instead of forcing the table wider than the screen. Code blocks (<pre>)
+   keep their own horizontal scroll. */
+.markdown-body th,
+.markdown-body td {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.markdown-body :not(pre) > code {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* Phone view: tighten tables and headings so they fit a narrow screen. */
+@media (max-width: 640px) {
+  .markdown-body {
+    font-size: 0.95rem;
+  }
+
+  .markdown-body table {
+    font-size: 0.78rem;
+    margin: 1rem 0;
+  }
+
+  .markdown-body th,
+  .markdown-body td {
+    padding: 0.4rem 0.5rem;
+  }
+
+  .markdown-body h1 {
+    font-size: 1.6rem;
+  }
+
+  .markdown-body h2 {
+    font-size: 1.3rem;
+  }
+
+  .markdown-body pre {
+    padding: 1rem;
+  }
+}

frontend/src/pages/datasets/ProteinDocsPage.tsx

@@ -24,8 +24,8 @@ export function ProteinDocsPage() {
     <div className="min-h-screen bg-white">
       {/* Header */}
       <section className="bg-gradient-to-b from-slate-50 to-white py-6 border-b border-gray-200">
-        <div className="max-w-5xl mx-auto px-6 flex items-center justify-between">
-          <div>
+        <div className="max-w-5xl mx-auto px-6 flex flex-wrap items-center justify-between gap-3">
+          <div className="min-w-0">
             <h1 className="text-3xl font-semibold text-slate-900">MuSProt Documentation</h1>
             <p className="text-slate-600 mt-1">Dataset format, schema, and usage examples</p>
           </div>