Merge pull request #9587 from circleci/fix-responsive-wide-content

Fix responsive behaviour for wide content

Author: rosieyohannan

ui/src/css/base.css

@@ -148,7 +148,7 @@ object[type="image/svg+xml"]:not([width]) {
 
 /* Firefox-specific CSS to fix flexbox shrinking issue */
 @-moz-document url-prefix() {
-  main > .content .doc,
+  main > div .doc,
   article.doc {
     flex-shrink: 0; /* Prevent excessive shrinking in Firefox */
   }

ui/src/css/doc.css

@@ -17,6 +17,15 @@
   }
 }
 
+/* Apply aggressive flexbox fix only above 1200px where the original problem occurs */
+@media screen and (min-width: 1200px) {
+  .doc {
+    flex: 1 1 0%;
+    width: 0; /* Force flexbox to ignore content width */
+    max-width: var(--doc-max-width--desktop); /* Restore max-width for centering */
+  }
+}
+
 /* === HEADING STYLES === */
 .doc h1,
 .doc h2,

ui/src/css/main.css

@@ -7,7 +7,7 @@ body.-toc aside.toc.sidebar {
     display: none;
   }
 
-  main > .content {
+  main > div {
     overflow-x: auto;
     max-width: 100vw;
   }
@@ -19,7 +19,7 @@ body.-toc aside.toc.sidebar {
     min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
   }
 
-  main > .content {
+  main > div {
     display: flex;
   }
 
@@ -33,8 +33,19 @@ body.-toc aside.toc.sidebar {
   }
 }
 
+@media screen and (min-width: 1280px) { /* Use xl breakpoint to match existing xl:items-center */
+  main {
+    max-width: calc(var(--doc-max-width--desktop) + var(--toc-width)); /* Article + TOC */
+    /* Let parent xl:items-center handle the centering */
+  }
+}
+
 @media screen and (min-width: 1600px) {
   aside.toc.sidebar {
     flex-basis: var(--toc-width--widescreen);
   }
+
+  main {
+    max-width: calc(var(--doc-max-width--desktop) + var(--toc-width--widescreen)); /* Article + wider TOC */
+  }
 }

ui/src/partials/main.hbs

@@ -1,4 +1,4 @@
-<main class="article w-fit-content max-w-screen">
+<main class="article w-full max-w-screen">
 {{> article-toolbar}}
   <div class="flex flex-col lg:flex-row w-full">
 {{#if (eq page.layout '404')}}