save7

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-header/components/FloatingBar.tsx

@@ -23,7 +23,7 @@ export const FloatingBar = () => {
     const sm = spacingsTokens['sm'];
     return css`
       position: sticky;
-      top: calc(-${base});
+      top: 0;
       left: 0;
       right: 0;
       width: calc(100% + ${base} + ${base});

src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx

@@ -4,6 +4,7 @@ import { css } from 'styled-components';
 import { Box } from '@/components';
 import { CommentSideBar } from '@/features/docs/doc-editor/components/comments/CommentSideBar';
 import { useDocStore } from '@/features/docs/doc-management';
+import { HEADER_HEIGHT } from '@/features/header';
 
 import { useRightPanelStore } from './useRightPanelStore';
 
@@ -22,6 +23,7 @@ export const RightPanel = () => {
       aria-label={t('Right panel')}
       aria-hidden={!isPanelOpen}
       $width="300px"
+      $minHeight={`calc(100dvh - ${HEADER_HEIGHT}px)`}
       $position="sticky"
       $hasTransition="slow"
       $background="var(--c--contextuals--background--surface--secondary)"

src/frontend/apps/impress/src/layouts/MainLayout.tsx

@@ -114,9 +114,7 @@ const MainContent = ({
       $width="100%"
       $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
       $position="relative"
-      $padding={{
-        all: isDesktop ? 'base' : '0',
-      }}
+      $padding={isDesktop ? 'base' : '0'}
       $background={
         currentBackgroundColor === 'white'
           ? 'var(--c--contextuals--background--surface--primary)'

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -5,6 +5,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { createGlobalStyle } from 'styled-components';
 
 import { Box, Loading } from '@/components';
 import { DEFAULT_QUERY_RETRY } from '@/core';
@@ -33,6 +34,12 @@ const DocEditor = dynamic(
   },
 );
 
+const DocLayoutGlobalStyle = createGlobalStyle`
+  #${MAIN_LAYOUT_ID} {
+    padding: 0;
+  }
+`;
+
 export function DocLayout() {
   const {
     query: { id },
@@ -63,8 +70,9 @@ export function DocLayout() {
         }}
       >
         <MainLayout enableResizablePanel={true}>
+          <DocLayoutGlobalStyle />
           <Box $direction="row" $width="100%">
-            <Box $width="100%" $margin={{ horizontal: 'auto' }}>
+            <Box $width="100%" $margin={{ horizontal: 'auto' }} $padding="base">
               <FloatingBar />
               <DocPage id={id} />
             </Box>