docs: fix styles and zen doc, closes #2912

packages/web/src/content/docs/config.mdx

@@ -69,6 +69,23 @@ Your editor should be able to validate and autocomplete based on the schema.
 
 ---
 
+### TUI
+
+You can configure TUI-specific settings through the `tui` option.
+
+```json title="opencode.json"
+{
+  "$schema": "https://opencode.ai/config.json",
+  "tui": {
+    "scroll_speed": 3
+  }
+}
+```
+
+[Learn more about using the TUI here](/docs/tui).
+
+---
+
 ### Models
 
 You can configure the providers and models you want to use in your OpenCode config through the `provider`, `model` and `small_model` options.
@@ -204,23 +221,6 @@ OpenCode will automatically download any new updates when it starts up. You can
 
 ---
 
-### TUI
-
-You can configure TUI-specific settings through the `tui` option.
-
-```json title="opencode.json"
-{
-  "$schema": "https://opencode.ai/config.json",
-  "tui": {
-    "scroll_speed": 3
-  }
-}
-```
-
-[Learn more about using the TUI here](/docs/tui).
-
----
-
 ### Formatters
 
 You can configure code formatters through the `formatter` option.

packages/web/src/content/docs/zen.mdx

@@ -73,6 +73,10 @@ You can also access our models through the following API endpoints.
 | Grok Code Fast 1 | grok-code        | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2          | kimi-k2          | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 
+The [model id](/docs/config/#models) in your OpenCode config
+uses the format `opencode/<model-id>`. For example, for GPT 5 Codex, you would
+use `opencode/gpt-5-codex` in your config.
+
 ---
 
 ## Pricing
@@ -94,6 +98,8 @@ We support a pay-as-you-go model. Below are the prices **per 1M tokens**.
 | GPT 5                             | $1.25  | $10.00 | $0.125      | -            |
 | GPT 5 Codex                       | $1.25  | $10.00 | $0.125      | -            |
 
+You might notice _Claude Haiku 3.5_ in your usage history. This is a [low cost model](/docs/config/#models) that's used to generate the titles of your sessions.
+
 :::note
 Credit card fees are passed along at cost; we don't charge anything beyond that.
 :::

packages/web/src/styles/custom.css

@@ -298,14 +298,16 @@ body > .page > header, :root[data-has-sidebar] body > .page > header {
 }
 
 
-.sl-container ul li a {
+nav.sidebar .sl-container ul li a,
+div.right-sidebar .sl-container ul li a {
   padding: 4px 24px !important;
   width: 100% !important;
   color: var(--color-text-weaker);
   opacity: 50%;
 }
 
-.sl-container ul li a:hover {
+nav.sidebar .sl-container ul li a:hover,
+div.right-sidebar .sl-container ul li a:hover {
   background: var(--color-background-weak);
 
   @media (prefers-color-scheme: dark) {
@@ -313,12 +315,14 @@ body > .page > header, :root[data-has-sidebar] body > .page > header {
   }
 }
 
-.sl-container ul li ul li {
+nav.sidebar .sl-container ul li ul li,
+div.right-sidebar .sl-container ul li ul li {
   padding: 4px 12px 0 12px !important;
 }
 
 
-.sl-container ul li a[aria-current="true"] {
+nav.sidebar .sl-container ul li a[aria-current="true"],
+div.right-sidebar .sl-container ul li a[aria-current="true"] {
   color: var(--color-text-strong) !important;
   opacity: 100%;
 }