From 62dea3b25adc781b715093b73545d2185901915f Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilherme@writechoice.io>
Date: Thu, 30 Oct 2025 17:55:22 -0300
Subject: [PATCH 1/4] style: enhance documentation mobile and tablet
 responsiveness

---
 docs/src/css/custom.css         | 166 ++++++++++++++++++++++++++++++++
 docs/src/pages/index.module.css |  50 +++++++---
 2 files changed, 205 insertions(+), 11 deletions(-)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 7e8b4165d373..becd6b2a8970 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -311,3 +311,169 @@ section > h2 {
   padding: 0 var(--ifm-spacing-horizontal);
   width: 100%;
 }
+
+/* Mobile fixes for proper containment */
+@media (max-width: 996px) {
+  [data-theme='dark'] section:nth-child(4n+1),
+  [data-theme='dark'] section:nth-child(4n+2),
+  [data-theme='dark'] section:nth-child(4n+3),
+  [data-theme='dark'] section:nth-child(4n+4),
+  [data-theme='dark'] section:nth-child(odd),
+  [data-theme='dark'] section:nth-child(even) {
+    width: 100%;
+    left: 0;
+    right: 0;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 2rem 0;
+    box-sizing: border-box;
+  }
+
+  section > div,
+  section > h2 {
+    padding: 0 1rem;
+    box-sizing: border-box;
+  }
+
+  .container {
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* Footer mobile padding */
+  .footer {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  .footer .container {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .footer__links {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .footer__col {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+/* Tablet footer padding */
+@media (max-width: 768px) {
+  .footer {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+
+  /* Global mobile padding for all doc content */
+  .main-wrapper {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  article {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .markdown {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .theme-doc-markdown {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Breadcrumbs padding */
+  .breadcrumbs {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  /* Table of contents padding */
+  .theme-doc-toc-mobile {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .theme-doc-toc-desktop {
+    padding-right: 1rem;
+  }
+
+  /* Navbar padding */
+  .navbar {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  .navbar__inner {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Sidebar padding */
+  .theme-doc-sidebar-container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  /* Code blocks padding */
+  .prism-code {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  /* Admonitions padding */
+  .admonition {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+}
+
+/* Extra small mobile devices */
+@media (max-width: 576px) {
+  .main-wrapper {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  article {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  /* Ensure all doc content wrapper has padding */
+  .docMainContainer_gTbr,
+  .docItemContainer_Djhp {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Doc item wrapper */
+  .docItemWrapper_XEAS {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  /* Pagination */
+  .pagination-nav {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  /* Tables - allow horizontal scroll but add padding */
+  .table-wrapper {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 0cf8bf59a561..f74b1525d251 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -199,10 +199,35 @@
   text-decoration: none;
 }
 
+/* Tablet and medium screens - reduce columns for better fit */
+@media (max-width: 1200px) {
+  [data-section="integration"] .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  [data-section="ecosystem"] .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Smaller tablets */
+@media (max-width: 768px) {
+  [data-section="introduction"] .cardGrid,
+  [data-section="integration"] .cardGrid,
+  [data-section="configuration"] .cardGrid,
+  [data-section="ecosystem"] .cardGrid {
+    grid-template-columns: 1fr;
+  }
+
+  [data-section="configuration"] .cardGrid > *:last-child {
+    grid-column: 1;
+  }
+}
+
+/* Mobile phones */
 @media (max-width: 996px) {
   section .cardGrid {
     grid-template-columns: 1fr;
-    padding: 0 1rem;
   }
 
   .heroInner {
@@ -218,21 +243,24 @@
 
   .card {
     width: 100%;
-    margin: 0 auto;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  .section {
+    padding: 0 1rem;
+    box-sizing: border-box;
   }
 
-  section, 
-  .hero,
   .cardGrid {
-    width: 100vw;
-    max-width: 100%;
-    margin: 0;
-    overflow-x: hidden;
+    margin: 1rem 0 0 0;
+    padding: 0;
+    box-sizing: border-box;
   }
 
-  :global(body) {
-    overflow-x: hidden;
-    width: 100%;
+  .cardLink {
+    display: block;
+    box-sizing: border-box;
   }
 }
 

From 8055dc59d976c1734f879f77eefe2add46c9c6bc Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilherme@writechoice.io>
Date: Thu, 30 Oct 2025 17:59:06 -0300
Subject: [PATCH 2/4] style: refine mobile and tablet CSS for improved layout
 consistency

---
 docs/src/css/custom.css         | 15 +--------------
 docs/src/pages/index.module.css |  3 +--
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index becd6b2a8970..22d1ca59ebe3 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -312,7 +312,6 @@ section > h2 {
   width: 100%;
 }
 
-/* Mobile fixes for proper containment */
 @media (max-width: 996px) {
   [data-theme='dark'] section:nth-child(4n+1),
   [data-theme='dark'] section:nth-child(4n+2),
@@ -344,7 +343,7 @@ section > h2 {
     box-sizing: border-box;
   }
 
-  /* Footer mobile padding */
+  /* Footer padding */
   .footer {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
@@ -373,7 +372,6 @@ section > h2 {
     padding-right: 1.5rem !important;
   }
 
-  /* Global mobile padding for all doc content */
   .main-wrapper {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -394,13 +392,11 @@ section > h2 {
     padding-right: 0;
   }
 
-  /* Breadcrumbs padding */
   .breadcrumbs {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
 
-  /* Table of contents padding */
   .theme-doc-toc-mobile {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -410,7 +406,6 @@ section > h2 {
     padding-right: 1rem;
   }
 
-  /* Navbar padding */
   .navbar {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
@@ -421,26 +416,22 @@ section > h2 {
     padding-right: 0;
   }
 
-  /* Sidebar padding */
   .theme-doc-sidebar-container {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
-  /* Code blocks padding */
   .prism-code {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
   }
 
-  /* Admonitions padding */
   .admonition {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
   }
 }
 
-/* Extra small mobile devices */
 @media (max-width: 576px) {
   .main-wrapper {
     padding-left: 1rem;
@@ -452,26 +443,22 @@ section > h2 {
     padding-right: 0.75rem;
   }
 
-  /* Ensure all doc content wrapper has padding */
   .docMainContainer_gTbr,
   .docItemContainer_Djhp {
     padding-left: 0;
     padding-right: 0;
   }
 
-  /* Doc item wrapper */
   .docItemWrapper_XEAS {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
-  /* Pagination */
   .pagination-nav {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
-  /* Tables - allow horizontal scroll but add padding */
   .table-wrapper {
     margin-left: 1rem;
     margin-right: 1rem;
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index f74b1525d251..70423f1e9582 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -199,7 +199,7 @@
   text-decoration: none;
 }
 
-/* Tablet and medium screens - reduce columns for better fit */
+/* Tablet and medium screens */
 @media (max-width: 1200px) {
   [data-section="integration"] .cardGrid {
     grid-template-columns: repeat(2, 1fr);
@@ -210,7 +210,6 @@
   }
 }
 
-/* Smaller tablets */
 @media (max-width: 768px) {
   [data-section="introduction"] .cardGrid,
   [data-section="integration"] .cardGrid,

From b4e7b9c60352b57d17cba6e6a3b8ad5ead85cf0c Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilherme@writechoice.io>
Date: Thu, 30 Oct 2025 18:06:22 -0300
Subject: [PATCH 3/4] fox: update grid layout for card sections

---
 docs/src/pages/index.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 70423f1e9582..d0f1345a6b9e 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -215,18 +215,18 @@
   [data-section="integration"] .cardGrid,
   [data-section="configuration"] .cardGrid,
   [data-section="ecosystem"] .cardGrid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   [data-section="configuration"] .cardGrid > *:last-child {
-    grid-column: 1;
+    grid-column: 1 / 3;
   }
 }
 
 /* Mobile phones */
 @media (max-width: 996px) {
   section .cardGrid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   .heroInner {

From 34898f3a18182d39190bb5e3e0cd0897fcce0093 Mon Sep 17 00:00:00 2001
From: Guilherme Afonso <guilherme@writechoice.io>
Date: Fri, 31 Oct 2025 06:44:51 -0300
Subject: [PATCH 4/4] style: clean up CSS

---
 docs/src/css/custom.css         | 155 ++------------------------------
 docs/src/pages/index.module.css |  48 ++--------
 2 files changed, 13 insertions(+), 190 deletions(-)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 22d1ca59ebe3..13fb4a9af361 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -240,7 +240,6 @@ main.container {
   background: var(--ifm-background-surface-color);
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -253,7 +252,6 @@ main.container {
   background: #111111;
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -262,13 +260,11 @@ main.container {
   margin-right: -50vw;
 }
 
-/* Section background alternation for dark mode - alternating every 2 sections */
 [data-theme='dark'] section:nth-child(4n+1),
 [data-theme='dark'] section:nth-child(4n+2) {
   background: #111111;
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -282,7 +278,6 @@ main.container {
   background: var(--ifm-background-surface-color);
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -291,7 +286,6 @@ main.container {
   margin-right: -50vw;
 }
 
-/*  container width inside sections */
 section > div,
 section > h2 {
   margin: 0 auto;
@@ -301,10 +295,9 @@ section > h2 {
 }
 
 section > h2 {
-  padding-left: var(--ifm-spacing-horizontal); /* Using the same padding as div */
+  padding-left: var(--ifm-spacing-horizontal);
 }
 
-/* Ensure consistent container width */
 .container {
   max-width: var(--ifm-container-width);
   margin: 0 auto;
@@ -320,147 +313,9 @@ section > h2 {
   [data-theme='dark'] section:nth-child(odd),
   [data-theme='dark'] section:nth-child(even) {
     width: 100%;
-    left: 0;
-    right: 0;
-    margin-left: 0;
-    margin-right: 0;
-    padding: 2rem 0;
-    box-sizing: border-box;
-  }
-
-  section > div,
-  section > h2 {
-    padding: 0 1rem;
-    box-sizing: border-box;
-  }
-
-  .container {
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  /* Footer padding */
-  .footer {
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-
-  .footer .container {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  .footer__links {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  .footer__col {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-}
-
-/* Tablet footer padding */
-@media (max-width: 768px) {
-  .footer {
-    padding-left: 1.5rem !important;
-    padding-right: 1.5rem !important;
-  }
-
-  .main-wrapper {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  article {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .markdown {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .theme-doc-markdown {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .breadcrumbs {
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-
-  .theme-doc-toc-mobile {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .theme-doc-toc-desktop {
-    padding-right: 1rem;
-  }
-
-  .navbar {
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-
-  .navbar__inner {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .theme-doc-sidebar-container {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .prism-code {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-
-  .admonition {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-}
-
-@media (max-width: 576px) {
-  .main-wrapper {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  article {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
-  .docMainContainer_gTbr,
-  .docItemContainer_Djhp {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .docItemWrapper_XEAS {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .pagination-nav {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .table-wrapper {
-    margin-left: 1rem;
-    margin-right: 1rem;
+    left: auto;
+    right: auto;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index d0f1345a6b9e..2e0d4c827e83 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -199,7 +199,6 @@
   text-decoration: none;
 }
 
-/* Tablet and medium screens */
 @media (max-width: 1200px) {
   [data-section="integration"] .cardGrid {
     grid-template-columns: repeat(2, 1fr);
@@ -221,14 +220,17 @@
   [data-section="configuration"] .cardGrid > *:last-child {
     grid-column: 1 / 3;
   }
-}
 
-/* Mobile phones */
-@media (max-width: 996px) {
-  section .cardGrid {
-    grid-template-columns: repeat(2, 1fr);
+  .hero {
+    padding: 2rem 0;
   }
 
+  .section {
+    margin-top: 2rem;
+  }
+}
+
+@media (max-width: 996px) {
   .heroInner {
     flex-direction: column;
     padding: 0 1rem;
@@ -239,38 +241,4 @@
     max-width: 100%;
     width: 100%;
   }
-
-  .card {
-    width: 100%;
-    margin: 0;
-    box-sizing: border-box;
-  }
-
-  .section {
-    padding: 0 1rem;
-    box-sizing: border-box;
-  }
-
-  .cardGrid {
-    margin: 1rem 0 0 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .cardLink {
-    display: block;
-    box-sizing: border-box;
-  }
 }
-
-@media (max-width: 768px) {
-  .hero {
-    padding: 2rem 0;
-  }
-
-  .section {
-    margin-top: 2rem;
-  }
-}
-
-