From e7376001e7f7f4934cbf5bd1686d37e1bd21cf3a Mon Sep 17 00:00:00 2001
From: jules <cloudtech@juleslive.net>
Date: Sat, 11 Jul 2026 09:17:19 +1000
Subject: [PATCH] fix(kb-ui): opaque reading surface for the object viewer

Long-form text sat on the theme's translucent glass card, so a busy background
wash read through behind the prose. Give the reader column an opaque surface
(the side outline/provenance panels stay glass). Verified live.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components-object.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components-object.tsx b/src/components-object.tsx
index 47deda5..31119a1 100644
--- a/src/components-object.tsx
+++ b/src/components-object.tsx
@@ -596,7 +596,9 @@ export const ObjectViewer: FC<ObjectViewerProps> = ({
       )}
 
       <div className="grid gap-5 lg:grid-cols-[1fr_260px]">
-        <div className="min-w-0 rounded-xl border border-border bg-card p-4">
+        {/* Opaque reading surface: long-form text sits calm, not over the theme's
+            background wash. The side panels stay glass. */}
+        <div className="min-w-0 rounded-xl border border-border bg-background p-4 sm:p-6">
           {outline.extracted_chars && outline.extracted_chars > 0 ? (
             <TextReader outline={outline} readText={readText} highlight={highlight} activeSection={activeSection} />
           ) : (