fix: Center content even if sidenav is present

Author: marienfressinaud

src/assets/stylesheets/application.css

@@ -14,11 +14,11 @@
 @import url('./components/topics.css');
 @import url('./components/turbo.css');
 @import url('./components/usernames.css');
+@import url('./layouts/base.css');
 @import url('./layouts/application.css');
 @import url('./layouts/authentication.css');
 @import url('./layouts/back.css');
 @import url('./layouts/banner.css');
-@import url('./layouts/base.css');
 @import url('./layouts/error.css');
 @import url('./layouts/header.css');
 @import url('./layouts/modal.css');

src/assets/stylesheets/layouts/application.css

@@ -1,10 +1,9 @@
 .layout__content--application {
+    --layout-content-gap: var(--space-smaller);
+
     display: flex;
-    max-width: var(--width-larger);
-    margin-right: auto;
-    margin-left: auto;
 
-    gap: var(--space-smaller);
+    gap: var(--layout-content-gap);
 }
 
 @media(max-width: 799px) {
@@ -15,6 +14,23 @@
 
 @media(min-width: 800px) {
     .layout__content--application {
-        gap: var(--space-medium);
+        --layout-content-gap: var(--space-medium);
     }
 }
+
+.layout__content--application:has(.sidenav) {
+    /* Extend the max-width so it can contain the content + 2 sidebars. This
+     * allows to center the content on the page when the screen is large
+     * enough.
+     */
+    max-width: calc(
+        var(--layout-content-width)
+        + 2 * var(--layout-content-padding)
+        + 2 * (var(--sidenav-width) + var(--layout-content-gap))
+    );
+}
+
+.layout__content--application:has(.sidenav) .layout__body {
+    margin-right: 0;
+    margin-left: 0;
+}

src/assets/stylesheets/layouts/authentication.css

@@ -1,5 +1,9 @@
 .layout__content--authentication {
+    --layout-content-width: 100%;
+
     display: flex;
+    margin-right: 0;
+    margin-left: 0;
 
     align-items: stretch;
     justify-content: stretch;

src/assets/stylesheets/layouts/base.css

@@ -24,26 +24,32 @@
 }
 
 .layout__content {
-    padding: var(--space-smaller);
+    --layout-content-padding: var(--space-smaller);
+    --layout-content-width: var(--width-large);
+
+    max-width: var(--layout-content-width);
+    margin-right: auto;
+    margin-left: auto;
+    padding: var(--layout-content-padding);
 
     flex: 1;
 }
 
 @media (min-width: 800px) {
     .layout__content {
-        padding: var(--space-medium);
+        --layout-content-padding: var(--space-medium);
     }
 
     .layout--connected .layout__content:has(.layout__back),
     .layout--connected .layout__content:has(.layout__search) {
-        margin-top: calc(-1 * var(--space-medium));
+        margin-top: calc(-1 * var(--layout-content-padding));
     }
 }
 
 .layout__body {
     --layout-body-flow: var(--space-medium);
 
-    max-width: var(--width-large);
+    max-width: var(--layout-content-width);
     margin-right: auto;
     margin-left: auto;
     padding: var(--layout-body-flow) var(--space-smaller);

src/assets/stylesheets/layouts/sidenav.css

@@ -1,3 +1,17 @@
+:root {
+    --sidenav-width: 17rem;
+}
+
+@media (min-width: 800px) and (max-width: 1300px) {
+    :root {
+        --sidenav-width: 11rem;
+    }
+}
+
+.sidenav__menu {
+    width: var(--sidenav-width);
+}
+
 @media (max-width: 799px) {
     .sidenav__container {
         position: fixed;
@@ -55,7 +69,7 @@
     }
 
     .sidenav__open-button[aria-expanded="true"] + .sidenav__container .sidenav__menu {
-        width: 17rem;
+        width: var(--sidenav-width);
     }
 }
 
@@ -64,16 +78,6 @@
     .sidenav__close-button {
         display: none;
     }
-
-    .sidenav__menu {
-        width: 11rem;
-    }
-}
-
-@media (min-width: 1200px) {
-    .sidenav__menu {
-        width: 16rem;
-    }
 }
 
 .sidenav__menu-item {