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
Docker Build / Build and Push Docker Image (push) Successful in 3m41s
This reverts commit d246a7ae06.
This commit is contained in:
+16
-12
@@ -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>{`
|
||||
|
||||
Reference in New Issue
Block a user