Revert "fix(docs): use rem-based calc for title/empty-state centering, unify both with same technique"
Docker Build / Build and Push Docker Image (push) Successful in 3m41s

This reverts commit d246a7ae06.
This commit is contained in:
2026-06-18 20:25:49 +08:00
parent d246a7ae06
commit 4eafebb2bf
+16 -12
View File
@@ -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>{`