From a9dc598dd1772eca33f072bf8fdfaf63cfc02144 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Mon, 12 Jan 2026 00:11:28 -0300
Subject: [PATCH] fix(docs): add data-app attribute and move CSS to index.html

- Add docs.css to main index.html CSS includes
- Remove redundant link tag from docs.html
- Add body data-app attribute in htmx-app.js when section changes
- Use body[data-app='docs'] selector for reliable CSS targeting
- Force light background on #main-content when docs is active
---
 ui/suite/docs/docs.css  | 62 +++++++++++++++--------------------------
 ui/suite/docs/docs.html |  2 --
 ui/suite/index.html     |  1 +
 ui/suite/js/htmx-app.js |  5 ++++
 4 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/ui/suite/docs/docs.css b/ui/suite/docs/docs.css
index 7b58a8d..5574424 100644
--- a/ui/suite/docs/docs.css
+++ b/ui/suite/docs/docs.css
@@ -18,36 +18,32 @@
 
 /* =============================================================================
    MAIN LAYOUT - Full height, light background
+   Use body[data-app="docs"] for reliable targeting
    ============================================================================= */
 
+/* When docs app is active - force light theme */
+body[data-app="docs"] {
+    overflow: hidden !important;
+}
+
+body[data-app="docs"] #main-content {
+    background: #f8f9fa !important;
+    background-color: #f8f9fa !important;
+    overflow: hidden !important;
+    height: calc(100vh - 40px) !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
 .docs-app {
     display: flex;
     flex-direction: column;
     height: 100%;
-    min-height: 100%;
-    background: #f8f9fa !important;
+    width: 100%;
+    background: #f8f9fa;
     color: #202124;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     overflow: hidden;
-    position: relative;
-}
-
-/* Force light background everywhere */
-html:has(.docs-app),
-body:has(.docs-app),
-#main-content:has(.docs-app),
-.app-main:has(.docs-app),
-.suite-content-panel:has(.docs-app),
-[data-app="docs"] {
-    overflow: hidden !important;
-    background: #f8f9fa !important;
-    background-color: #f8f9fa !important;
-}
-
-#main-content:has(.docs-app) {
-    height: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
 }
 
 /* =============================================================================
@@ -321,12 +317,10 @@ body:has(.docs-app),
 .docs-main {
     display: flex;
     flex-direction: row;
-    flex: 1 1 auto;
+    flex: 1;
     overflow: hidden;
-    background: #f8f9fa !important;
+    background: #f8f9fa;
     min-height: 0;
-    width: 100%;
-    position: relative;
 }
 
 /* =============================================================================
@@ -334,16 +328,14 @@ body:has(.docs-app),
    ============================================================================= */
 
 .docs-canvas {
-    flex: 1 1 auto;
+    flex: 1;
     overflow-y: auto;
     overflow-x: auto;
     padding: 20px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    background: #f8f9fa !important;
-    min-height: 0;
-    min-width: 0;
+    background: #f8f9fa;
 }
 
 .editor-page {
@@ -538,30 +530,20 @@ body:has(.docs-app),
 }
 
 /* =============================================================================
-   CHAT PANEL - RIGHT SIDE (MUST BE FLEX CHILD OF docs-main)
+   CHAT PANEL - RIGHT SIDE
    ============================================================================= */
 
 .chat-panel {
     width: 280px;
-    min-width: 280px;
-    max-width: 280px;
     flex: 0 0 280px;
     display: flex;
     flex-direction: column;
     background: #ffffff;
     border-left: 1px solid #e0e0e0;
-    height: 100%;
     overflow: hidden;
-    order: 2; /* Ensure it's on the right */
 }
 
 .chat-panel.collapsed {
-    width: 0;
-    min-width: 0;
-    max-width: 0;
-    flex: 0 0 0;
-    overflow: hidden;
-    border-left: none;
     display: none;
 }
 
diff --git a/ui/suite/docs/docs.html b/ui/suite/docs/docs.html
index 35a62cf..30493cc 100644
--- a/ui/suite/docs/docs.html
+++ b/ui/suite/docs/docs.html
@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="docs/docs.css" />
-
 <div class="docs-app" id="docs-app">
     <div class="docs-toolbar">
         <div class="toolbar-left">
diff --git a/ui/suite/index.html b/ui/suite/index.html
index 849831c..285bf7b 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -37,6 +37,7 @@
         <link rel="stylesheet" href="billing/billing.css" />
         <link rel="stylesheet" href="products/products.css" />
         <link rel="stylesheet" href="tickets/tickets.css" />
+        <link rel="stylesheet" href="docs/docs.css" />
 
         <!-- Local Libraries (no external CDN dependencies) -->
         <script src="js/vendor/htmx.min.js"></script>
diff --git a/ui/suite/js/htmx-app.js b/ui/suite/js/htmx-app.js
index 982328a..6298b97 100644
--- a/ui/suite/js/htmx-app.js
+++ b/ui/suite/js/htmx-app.js
@@ -392,6 +392,11 @@
       section = getCurrentSection();
     }
 
+    // Set data-app attribute on body for CSS targeting (e.g., docs app styling)
+    if (section) {
+      document.body.setAttribute("data-app", section);
+    }
+
     // First, remove ALL active classes from all tabs, items, and apps button
     document.querySelectorAll(".app-tab.active").forEach((item) => {
       item.classList.remove("active");