diff --git a/web/default/src/features/docs/index.tsx b/web/default/src/features/docs/index.tsx
index e7a073536..96f9af079 100644
--- a/web/default/src/features/docs/index.tsx
+++ b/web/default/src/features/docs/index.tsx
@@ -357,7 +357,7 @@ export function Docs() {
             {/* Center content */}
             <main className='min-w-0 flex-1'>
               {/* Document title - always reserve space, visually centered with page header */}
-              <div className='mb-6 text-center min-h-[2.5rem] lg:[margin-left:calc(-256px-2rem)] lg:[width:calc(100%+256px+2rem)] xl:[width:calc(100%+256px+2rem+2rem+12rem)]'>
+              <div className='mb-6 text-center min-h-[2.5rem] lg:-ml-[288px] lg:w-[calc(100%+288px)] xl:-ml-[288px] xl:w-[calc(100%+512px)]'>
                 <h1 className='text-2xl font-bold tracking-tight text-foreground'>
                   {selectedDoc && !docLoading ? selectedDoc.title : '\u00A0'}
                 </h1>
@@ -371,17 +371,8 @@ export function Docs() {
                     <div className='h-4 w-4/6 rounded bg-muted' />
                   </div>
                 ) : (
-                  /* Empty state - centered with page header */
-                  <div className='flex min-h-[50vh] items-center justify-center lg:[margin-left:calc(-256px-2rem)] lg:[width:calc(100%+256px+2rem)] xl:[width:calc(100%+256px+2rem+2rem+12rem)]'>
-                    <div className='flex flex-col items-center text-center'>
-                      <div className='flex size-16 items-center justify-center rounded-full bg-muted'>
-                        <Book className='size-7 text-muted-foreground' />
-                      </div>
-                      <p className='mt-4 text-sm text-muted-foreground'>
-                        {t('Select a document to start reading')}
-                      </p>
-                    </div>
-                  </div>
+                  /* Spacer to maintain layout height */
+                  <div className='min-h-[50vh]' />
                 )
               ) : (
                 <>
@@ -451,6 +442,19 @@ export function Docs() {
             )}
           </div>
 
+          {/* Empty state overlay - absolutely positioned, centered in the page container */}
+          {!selectedDoc && !docLoading && (
+            <div className='absolute inset-x-0 top-0 bottom-0 flex items-center justify-center px-6 pointer-events-none'>
+              <div className='flex flex-col items-center text-center'>
+                <div className='flex size-16 items-center justify-center rounded-full bg-muted'>
+                  <Book className='size-7 text-muted-foreground' />
+                </div>
+                <p className='mt-4 text-sm text-muted-foreground'>
+                  {t('Select a document to start reading')}
+                </p>
+              </div>
+            </div>
+          )}
         </div>
 
       <style>{`