fix: Fix pages layout for wide format

diplodoc-platform · Oct 16, 2024 · 55c668e · 55c668e
1 parent e0efe3e
commit 55c668e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 41 deletions.
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
@@ -1,36 +1,9 @@
 @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);
-    }
-}
-
 .dc-root_wide-format {
     .dc-doc-layout__right:has(.dc-subnavigation:only-child) {
         display: none;
     }
-
-    @media screen and (max-width: 1440px) {
-        .dc-doc-page {
-            width: 100%;
-        }
-    }
-}
-
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-    .dc-root_wide-format {
-        & .dc-subnavigation {
-            $wideFormatHorizontalPadding: 8px;
-
-            padding-inline: 0 $wideFormatHorizontalPadding;
-            width: calc(100% - $wideFormatHorizontalPadding);
-        }
-
-        & .dc-doc-page__main {
-            padding-inline: #{$wideFormatHorizontalPadding};
-        }
-    }
 }
 
 .pc-block-base {
@@ -54,20 +27,6 @@
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-    .pc-navigation {
-        & > .container-fluid {
-            padding-right: $mobileRPadding;
-            padding-left: $mobileLPadding;
-        }
-
-        .pc-overflow-scroller {
-            justify-content: flex-end;
-            overflow: visible;
-        }
-    }
-}
-
 .pc-navigation-popup {
     background: var(--g-color-base-background);
 }
@@ -126,6 +85,54 @@
     z-index: 101;
 }
 
+@media (max-width: map-get($screenBreakpoints, 'xxxl') - 1) {
+    .dc-root_wide-format {
+        .dc-doc-page {
+            width: 100%;
+        }
+
+        .dc-doc-layout__toc {
+            padding-left: 0;
+        }
+    }
+
+    .pc-layout {
+        &__content > .pc-Grid,
+        &__navigation > .container-fluid {
+            max-width: 100%;
+        }
+    }
+}
+
+@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    .dc-root_wide-format {
+        & .dc-subnavigation {
+            $wideFormatHorizontalPadding: 8px;
+
+            padding-inline: 0 $wideFormatHorizontalPadding;
+            width: calc(100% - $wideFormatHorizontalPadding);
+        }
+
+        & .dc-doc-page__main {
+            padding-inline: #{$wideFormatHorizontalPadding};
+        }
+    }
+}
+
+@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    .pc-navigation {
+        & > .container-fluid {
+            padding-right: $mobileRPadding;
+            padding-left: $mobileLPadding;
+        }
+
+        .pc-overflow-scroller {
+            justify-content: flex-end;
+            overflow: visible;
+        }
+    }
+}
+
 @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
     .dc-toc {
         height: fit-content !important; /* stylelint-disable-line declaration-no-important */
@@ -193,3 +200,9 @@
         }
     }
 }
+
+@media (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);
+    }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -20,4 +20,6 @@ $screenBreakpoints: (
     'md': 769px,
     'lg': 1081px,
     'xl': 1185px,
+    'xxl': 1280px,
+    'xxxl': 1440px,
 );