allow wide option for article viewing

ui/src/css/doc.css

@@ -32,6 +32,11 @@
   }
 }
 
+/* Fluid width mode - removes max-width constraint */
+.doc--fluid {
+  max-width: 100% !important;
+}
+
 /* === HEADING STYLES === */
 .doc h1,
 .doc h2,

ui/src/css/main.css

@@ -70,3 +70,10 @@ body.-toc aside.toc.sidebar {
     max-width: calc(var(--doc-max-width--desktop) + var(--toc-width--widescreen)); /* Article + wider TOC */
   }
 }
+
+/* Fluid width mode - remove main max-width constraints */
+@media screen and (min-width: 1280px) {
+  main:has(.doc--fluid) {
+    max-width: none;
+  }
+}

ui/src/js/12-width-toggle.js

@@ -0,0 +1,37 @@
+/**
+ * Width Toggle
+ * Handles toggling between fixed and fluid article width
+ */
+
+;(function () {
+  'use strict'
+
+  const STORAGE_KEY = 'article-width-mode'
+  const FLUID_CLASS = 'doc--fluid'
+  const ACTIVE_CLASS = 'bg-gray-200'
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const toggleButton = document.getElementById('width-toggle')
+    const articleElement = document.querySelector('article.doc')
+
+    if (!toggleButton || !articleElement) {
+      return
+    }
+
+    // Check for saved preference
+    const savedMode = localStorage.getItem(STORAGE_KEY)
+    if (savedMode === 'fluid') {
+      articleElement.classList.add(FLUID_CLASS)
+      toggleButton.classList.add(ACTIVE_CLASS)
+    }
+
+    // Handle toggle click
+    toggleButton.addEventListener('click', function () {
+      const isFluid = articleElement.classList.toggle(FLUID_CLASS)
+      toggleButton.classList.toggle(ACTIVE_CLASS, isFluid)
+
+      // Save preference
+      localStorage.setItem(STORAGE_KEY, isFluid ? 'fluid' : 'fixed')
+    })
+  })
+})()

ui/src/partials/header-content.hbs

@@ -16,6 +16,9 @@
     <div class="flex items-center space-x-4 ml-2">
       <!--<img src="{{{uiRootPath}}}/img/language-icon.svg" alt="Language Icon" class="h-5 w-5">-->
       <img data-page-navigation-toggle src="{{{uiRootPath}}}/img/nav-menu.svg" alt="Navigation Menu Icon" class="h-5 w-5 lg:hidden">
+      <button id="width-toggle" class="hidden md:block text-dark-green rounded-full px-[16px] border py-[8px] border-gray-300 font-medium hover:bg-gray-50 transition-colors">
+        Wide
+      </button>
       <a href="https://app.circleci.com/" class="hidden md:block bg-slime-green text-dark-green rounded-full px-[16px] border py-[8px] border-operational-green font-medium">
         Go to Application
       </a>