fix: pc style override for document mode

src/components/App/App.scss

@@ -22,7 +22,6 @@
 .g-root {
     --dc-header-height: 0px;
     --mermaid-zoom-control-color: var(--g-color-text-primary);
-    --pc-first-block-indent: 0px;
     --pc-first-block-mobile-indent: 0px;
 
     .dc-root_full-header & {

src/components/App/App.tsx

@@ -153,6 +153,7 @@ export function App(props: DocInnerProps): ReactElement {
         'data' in data &&
         'fullScreen' in data.data &&
         data.data.fullScreen;
+    const appClassName = `App ${fullScreenPC ? 'fullscreen-mode' : 'document-mode'}`
 
     useEffect(() => {
         updateRootClassName({
@@ -170,7 +171,7 @@ export function App(props: DocInnerProps): ReactElement {
 
     if (!navigation) {
         return (
-            <div className="App">
+            <div className={appClassName}>
                 <ThemeProvider theme={theme} direction={direction}>
                     <Page {...pageProps} {...pageContext}>
                         {type === DocumentType.PageConstructor && (
@@ -193,6 +194,7 @@ export function App(props: DocInnerProps): ReactElement {
                                                   blocks: [
                                                       {
                                                           type: 'page',
+                                                          resetPaddings: true,
                                                       },
                                                   ],
                                               }
@@ -212,7 +214,7 @@ export function App(props: DocInnerProps): ReactElement {
     const headerWithControls = rightItems.some((item: {type: string}) => item.type === 'controls');
 
     return (
-        <div className="App">
+        <div className={appClassName}>
             <ThemeProvider theme={theme} direction={direction}>
                 <PageConstructorProvider theme={theme}>
                     <PageConstructor
@@ -251,6 +253,7 @@ export function App(props: DocInnerProps): ReactElement {
                                       blocks: [
                                           {
                                               type: 'page',
+                                              resetPaddings: true,
                                           },
                                       ],
                                   }

src/components/ConstructorPage/index.tsx

@@ -28,7 +28,7 @@ export function ConstructorPage({data: {data}, theme}: {data: PageContentData; t
     const themedBackground = getThemedValue(data?.background, theme);
 
     return (
-        <div className={bPC('')}>
+        <div className={bPC('docs')}>
             <div className={bPC('wrapper')}>
                 {data?.blocks && themedBackground && (
                     <BackgroundMedia {...themedBackground} className={bPC('background')} />

src/components/Layout/Layout.scss

@@ -11,17 +11,6 @@
         min-height: calc(100vh - var(--dc-header-height));
     }
 
-    .pc-page-constructor & {
-        &__content {
-            flex: 1 1 auto;
-            margin: 0 -10px;
-
-            .mobile.dc-root_wide-format & {
-                margin: 0px -28px;
-            }
-        }
-    }
-
     &__footer {
         position: relative;
         z-index: 90;

src/styles/default.scss

@@ -32,26 +32,6 @@ body {
     }
 }
 
-.pc-navigation {
-    z-index:  101;
-
-    .desktop.dc-root_wide-format & .container-fluid {
-        padding: 20px;
-
-        & .col {
-            padding: 0;
-        }
-    }
-
-    .mobile.dc-root_wide-format & .container-fluid {
-        padding: 12px;
-
-        & .col {
-            padding: 0;
-        }
-    }
-}
-
 #root {
     min-height: 100vh;
 }

src/styles/overrides.scss

@@ -1,27 +1,57 @@
-@media only screen and (max-width: 577px) {
+@import './variables';
+
+@media only screen and (max-width: map-get($screenBreakpoints, 'sm')) {
     .pc-block-base.pc-block-base.pc-block-base:first-child {
         margin-top: var(--pc-first-block-mobile-indent, 64px);
     }
 }
 
-.pc-block-base.pc-block-base.pc-block-base:first-child {
-    margin-top: var(--pc-first-block-indent, 96px);
-}
-
-.pc-Grid {
-    .container-fluid {
-        padding-right: 0px;
-        padding-left: 0px;
-    }
-}
 
-.pc-Grid .pc-Grid {
-    .container-fluid .pc-header-block__container-fluid {
+.App.document-mode {
+    .pc-Grid {
         padding-right: 40px;
         padding-left: 40px;
+
+        @media (max-width: map-get($screenBreakpoints, 'md')) {
+            padding-right: 20px;
+            padding-left: 20px;
+
+            max-width: 100%;
+        }
+
+        .container-fluid {
+            padding-right: 0;
+            padding-left: 0;
+
+            max-width: unset;
+        }
+    }
+
+    .pc-layout__content > .pc-Grid {
+        padding: 0;
+    }
+
+    .pc-layout__navigation > .container-fluid {
+        max-width: 1440px;
+    }
+
+    .dc-doc-page {
+        @media screen and (max-width: 1440px) {
+            &:not(&_regular-page-width) {
+                width: 100%;
+            }
+        }
     }
 }
 
+.dc-doc-page__main:has(.dc-doc-page__content > .pc-page-constructor__docs) {
+    padding: 20px 0 24px;
+}
+
+.dc-doc-page__main:has(.dc-doc-page__content > .pc-page-constructor) {
+    padding: 20px 0 24px;
+}
+
 .pc-block-base {
     padding: 0 !important;
 }
@@ -65,3 +95,23 @@
         transition: width 0.3s;
     }
 }
+
+.pc-navigation {
+    z-index:  101;
+
+    .desktop.dc-root_wide-format & .container-fluid {
+        padding: 30px;
+
+        & .col {
+            padding: 0;
+        }
+    }
+
+    .mobile.dc-root_wide-format & .container-fluid {
+        padding: 12px;
+
+        & .col {
+            padding: 0;
+        }
+    }
+}