Make the complete model matrix mobile friendly

lfm/models/complete-library.mdx

@@ -1,14 +1,14 @@
 ---
 title: "Liquid Foundation Models"
 description: "Browse every Liquid Foundation Model (LFM) for local AI: text, vision, audio, and decision models plus Liquid Nanos, with GGUF, MLX, and ONNX formats."
 ---
 
 <div className="capabilities">
 
 Across the library:
 
 - Context length depends on the model: 32K tokens for most text, vision, audio, and omni models, 256K for LFM3-1.7B, 128K for LFM3-VL-2B, LFM2.5-8B-A1B, d1-2B, and d1-omni-2B, 131K for LFM2.5-24B-A2B, 8K for the LFM2.5 encoders, and 16K for d1-omni-600M. Each model page lists its exact limit.
 - Text and vision models run with [Transformers](/deployment/gpu-inference/transformers), [llama.cpp](/deployment/on-device/llama-cpp), [vLLM](/deployment/gpu-inference/vllm), [SGLang](/deployment/gpu-inference/sglang), [MLX](/deployment/on-device/mlx), [Ollama](/deployment/on-device/ollama), and [Atomic Chat](/deployment/on-device/atomic-chat). Audio, omni, retrieval, encoder, and decision models support fewer runtimes (d1-omni-600M: Transformers, llama.cpp, and mlx-vlm); check each model page.
 - Most open-weight models can be fine-tuned with [Liquid Finetune](/lfm/fine-tuning/liquid-finetune), [TRL](/lfm/fine-tuning/trl), or [Unsloth](/lfm/fine-tuning/unsloth). The **Trainable?** column in the matrix below lists the documented path for each model.
 
 </div>
@@ -38,7 +38,7 @@
   Interleaved audio/text models for TTS, ASR, and voice chat.
 </Card>
 
 <Card title="Omni Models" icon="circle-nodes" href="/lfm/models/omni-models">
   Text, image, video, and audio input with text or speech output in one model.
 </Card>
 
@@ -46,7 +46,7 @@
   Purpose-built models for classification, routing, and scoring.
 </Card>
 
 <Card title="Liquid Nanos" icon="sparkles" href="/lfm/models/liquid-nanos">
   Task-specific models for extraction, summarization, RAG, and translation.
 </Card>
 
@@ -80,7 +80,7 @@
 
 - **GGUF** — Best for local CPU/GPU inference on any platform. Use with [llama.cpp](/deployment/on-device/llama-cpp), [LM Studio](/deployment/on-device/lm-studio), [Ollama](/deployment/on-device/ollama), or [Atomic Chat](/deployment/on-device/atomic-chat). Every open-weight model in the matrix has a `LiquidAI/<model>-GGUF` repository.
 - **MLX** — Best for Mac users with Apple Silicon. Leverages unified memory for fast inference via [MLX](/deployment/on-device/mlx) or [Atomic Chat](/deployment/on-device/atomic-chat). Many models have official `LiquidAI/<model>-MLX-<bits>` repositories; the others are community conversions on [mlx-community](https://huggingface.co/mlx-community/collections?search=LFM).
 - **ONNX** — Best for production deployments and edge devices. Cross-platform with ONNX Runtime across CPUs, GPUs, and accelerators. Available as `LiquidAI/<model>-ONNX` for the LFM3 models and the main LFM2.5 text, vision, and audio models, and for some LFM2 models through [onnx-community](https://huggingface.co/onnx-community); see the matrix.
 
 ### Quantization
 
@@ -92,6 +92,10 @@
 
 ## Complete Model Matrix
 
+<div className="model-matrix">
+
+<p className="model-matrix-scroll-hint">Swipe horizontally to see all formats.</p>
+
 | Model | HF | GGUF | MLX | ONNX | Drafter | Trainable? |
 | ----- | ----- | ----- | ----- | ----- | ----- | ----- |
 | **Text-to-text Models** | | | | | | |
@@ -131,4 +135,6 @@
 | [d1-ultra](/lfm/models/d1#models) | API | — | — | — | — | No |
 | [d1.1](/lfm/models/d1) | API | — | — | — | — | No |
 
+</div>
+
 <Note>Looking for an older model? Deprecated models and their recommended replacements are listed on the [Deprecations](/lfm/help/deprecations) page.</Note>

style.css

@@ -1203,6 +1203,100 @@ table:not(:has(thead th:nth-child(6))) a:hover {
   text-decoration-line: underline !important;
 }
 
+/* Complete model matrix: keep the desktop layout; adapt only on mobile. */
+.model-matrix-scroll-hint {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .model-matrix {
+    container-type: inline-size;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .model-matrix [data-table-wrapper] {
+    --page-padding: 0px;
+  }
+
+  .model-matrix [data-component-part="scroll-area-viewport"] {
+    overscroll-behavior-x: contain;
+    scroll-padding-left: calc(12rem + var(--page-padding, 0px));
+    scroll-padding-right: var(--page-padding, 0px);
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) {
+    min-width: 48rem !important;
+    border-collapse: separate !important;
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th,
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td {
+    min-width: 0 !important;
+    width: auto !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    white-space: normal !important;
+    overflow-wrap: anywhere;
+    text-align: center !important;
+    padding: 0.5rem !important;
+    background: var(--lfm-bg);
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) tbody td {
+    padding: 0 0.5rem !important;
+    border-bottom: 1px solid var(--lfm-border);
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th:first-child,
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:first-child {
+    position: sticky;
+    left: var(--page-padding, 0px);
+    z-index: 20;
+    width: 12rem !important;
+    padding: 0.75rem 1rem !important;
+    text-align: left !important;
+    border-right: 1px solid var(--lfm-border);
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) tbody td:first-child {
+    padding: 0 1rem !important;
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th:nth-child(n+2):nth-child(-n+6),
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:nth-child(n+2):nth-child(-n+6) {
+    width: 4rem !important;
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:nth-child(n+2):nth-child(-n+6) a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0 !important;
+  }
+
+  .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) tbody tr:has(td:first-child strong) td {
+    padding: 0.5rem 1rem !important;
+    background: var(--lfm-surface);
+  }
+
+  /* Keep training text beside the pinned column on narrow screens. */
+  @container (max-width: 28rem) {
+    .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th:last-child,
+    .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:last-child {
+      padding-left: max(0.5rem, calc(28rem - 100cqw)) !important;
+    }
+  }
+
+  .model-matrix-scroll-hint {
+    display: block;
+    color: var(--lfm-muted);
+    font-size: var(--lfm-fs-sm);
+  }
+}
+
 /* Code block styling - ensure visible background contrast */
 /* Inline code */
 /* Inline code */

styles.js

@@ -1208,6 +1208,101 @@
       text-decoration-line: underline !important;
     }
 
+    /* Complete model matrix: keep the desktop layout; adapt only on mobile. */
+    .model-matrix-scroll-hint {
+      display: none;
+    }
+
+    @media (max-width: 767px) {
+      .model-matrix {
+        container-type: inline-size;
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      .model-matrix [data-table-wrapper] {
+        --page-padding: 0px;
+      }
+
+      .model-matrix [data-component-part="scroll-area-viewport"] {
+        overscroll-behavior-x: contain;
+        scroll-padding-left: calc(12rem + var(--page-padding, 0px));
+        scroll-padding-right: var(--page-padding, 0px);
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) {
+        min-width: 48rem !important;
+        border-collapse: separate !important;
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th,
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td {
+        min-width: 0 !important;
+        width: auto !important;
+        overflow: visible !important;
+        text-overflow: clip !important;
+        white-space: normal !important;
+        overflow-wrap: anywhere;
+        text-align: center !important;
+        padding: 0.5rem !important;
+        background: var(--lfm-bg);
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) tbody td {
+        padding: 0 0.5rem !important;
+        border-bottom: 1px solid var(--lfm-border);
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th:first-child,
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:first-child {
+        position: sticky;
+        left: var(--page-padding, 0px);
+        z-index: 20;
+        width: 12rem !important;
+        padding: 0.75rem 1rem !important;
+        text-align: left !important;
+        border-right: 1px solid var(--lfm-border);
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) tbody td:first-child {
+        padding: 0 1rem !important;
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th:nth-child(n+2):nth-child(-n+6),
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:nth-child(n+2):nth-child(-n+6) {
+        width: 4rem !important;
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:nth-child(n+2):nth-child(-n+6) a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 44px;
+        min-height: 44px;
+        padding: 0 !important;
+      }
+
+      .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) tbody tr:has(td:first-child strong) td {
+        padding: 0.5rem 1rem !important;
+        background: var(--lfm-surface);
+      }
+
+      /* Keep training text beside the pinned column on narrow screens. */
+      @container (max-width: 28rem) {
+        .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) th:last-child,
+        .model-matrix table:has(thead th:nth-child(7):not(:nth-child(8))) td:last-child {
+          padding-left: max(0.5rem, calc(28rem - 100cqw)) !important;
+        }
+      }
+
+      .model-matrix-scroll-hint {
+        display: block;
+        color: var(--lfm-muted);
+        font-size: var(--lfm-fs-sm);
+      }
+    }
+
+
     /* Code block styling - ensure visible background contrast */
     /* Inline code */
     /* Inline code */