From 20b341d839eef1717d4653444a839cba9f4c668c Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBookPro.fritz.box>
Date: Thu, 5 Mar 2026 16:30:04 +0100
Subject: [PATCH] fix: vocab worksheet fills full browser width, fix missing
 thumbnails

- Remove max-w-7xl constraint on content area so panels stretch to edges
- Fall back to direct API thumbnail URLs when blob URLs are empty
- Original pages now reliably show even if preloaded thumbnails failed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 studio-v2/app/vocab-worksheet/page.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/studio-v2/app/vocab-worksheet/page.tsx b/studio-v2/app/vocab-worksheet/page.tsx
index db7b645..58579fd 100644
--- a/studio-v2/app/vocab-worksheet/page.tsx
+++ b/studio-v2/app/vocab-worksheet/page.tsx
@@ -891,7 +891,7 @@ export default function VocabWorksheetPage() {
         </div>
       </div>
 
-      <div className="relative z-10 max-w-7xl mx-auto px-6 py-6">
+      <div className="relative z-10 w-full px-6 py-6">
         {/* OCR Settings Panel */}
         {showSettings && (
           <div className={`${glassCard} rounded-2xl p-6 mb-6`}>
@@ -1428,9 +1428,18 @@ export default function VocabWorksheetPage() {
                   const processedPageIndices = selectedPages.length > 0
                     ? selectedPages
                     : [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))].sort((a, b) => a - b)
+
+                  // Use blob URLs if available, otherwise fall back to direct API URLs
+                  const apiBase = getApiBase()
                   const thumbsToShow = processedPageIndices
-                    .filter(idx => idx >= 0 && idx < pagesThumbnails.length)
-                    .map(idx => ({ idx, src: pagesThumbnails[idx] }))
+                    .filter(idx => idx >= 0)
+                    .map(idx => ({
+                      idx,
+                      src: (idx < pagesThumbnails.length && pagesThumbnails[idx])
+                        ? pagesThumbnails[idx]
+                        : session ? `${apiBase}/api/v1/vocab/sessions/${session.id}/pdf-thumbnail/${idx}?hires=true` : null,
+                    }))
+                    .filter(t => t.src !== null) as { idx: number; src: string }[]
 
                   if (thumbsToShow.length > 0) {
                     return thumbsToShow.map(({ idx, src }) => (