diff --git a/docs/backend/backend_python/api.md b/docs/backend/backend_python/api.md
index 96eff1d61..02821cbab 100644
--- a/docs/backend/backend_python/api.md
+++ b/docs/backend/backend_python/api.md
@@ -4,20 +4,3 @@
 	<swagger-ui src="openapi.json"/>
 </div>
 
-<!-- Add a small script to mark the page so we can scope header/footer CSS only for this route -->
-<script>
-	(function () {
-		function markApiPage() {
-			try {
-				document.body.classList.add('api-fixed-500');
-			} catch (e) {
-				/* ignore */
-			}
-		}
-		if (document.readyState === 'loading') {
-			document.addEventListener('DOMContentLoaded', markApiPage);
-		} else {
-			markApiPage();
-		}
-	})();
-</script>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index e7f412d2b..c6a1479e4 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,3 +1,19 @@
+/* Global overflow prevention */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+body {
+  overflow-x: hidden;
+  max-width: 100vw;
+  position: relative;
+}
+
 .md-typeset .admonition-title {
   margin-bottom: 10px;
   
@@ -6,18 +22,29 @@
 .md-header__button.md-logo img {
   width: 34px;
   height: auto;
+  flex-shrink: 0;
 }
 
 .md-header__button.md-logo {
   display: flex;
   align-items: center;
-
   padding-right: 0;     
-  margin-right: 0;      
+  margin-right: 0;
+  flex-shrink: 0;
 }
  
 .md-header__title {
-  margin-left: 8px !important;  
+  margin-left: 8px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.md-header__inner {
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* Responsive tweaks: ensure header, images, tables and code blocks behave well on small screens */
@@ -47,6 +74,38 @@
 .md-main, .md-content {
   padding-left: 1rem;
   padding-right: 1rem;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Ensure Material theme containers don't overflow */
+.md-container {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.md-grid {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.md-sidebar {
+  max-width: 100%;
+}
+
+/* Navigation drawer on mobile */
+.md-nav__list {
+  word-wrap: break-word;
+}
+
+.md-nav__item {
+  max-width: 100%;
+}
+
+.md-nav__link {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 /* Tablet and small laptop */
@@ -59,49 +118,112 @@
   .md-header__button.md-logo {
     padding-right: 6px;
     margin-right: 6px;
+    flex-shrink: 0;
   }
 
   .md-header__title {
     margin-left: 6px !important;
     font-size: 1rem;
-    white-space: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100vw - 120px);
+    flex-shrink: 1;
   }
 
   /* Allow header inner area to wrap so items don't overflow */
   .md-header__inner {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     gap: 6px;
+    overflow: hidden;
+    max-width: 100%;
+  }
+
+  .md-header__inner > * {
+    flex-shrink: 0;
+  }
+
+  .md-header__title {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  /* Ensure header actions don't overflow */
+  .md-header__actions {
+    flex-shrink: 0;
+    margin-left: auto;
   }
 
   /* Slightly reduce padding for main content */
   .md-main {
     padding: 0.5rem 0.75rem;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .md-content {
+    max-width: 100%;
+    overflow-x: hidden;
   }
 
   /* Make navigation easier to tap */
   .md-nav {
     margin-top: 8px;
   }
+
+  /* Ensure all text content wraps properly */
+  .md-typeset h1,
+  .md-typeset h2,
+  .md-typeset h3,
+  .md-typeset h4,
+  .md-typeset h5,
+  .md-typeset h6 {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
+
+  .md-typeset p,
+  .md-typeset li,
+  .md-typeset blockquote {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
 }
 
 /* Small phones */
 @media (max-width: 480px) {
   .md-header__button.md-logo img {
     width: 24px;
+    flex-shrink: 0;
   }
 
   .md-header__title {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    max-width: calc(100vw - 100px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .md-header__title a {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   /* Ensure actions align to the right and don't push content */
   .md-header__actions {
     margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .md-header__inner {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
 
   .md-nav {
@@ -109,11 +231,57 @@
   }
 
   .md-content {
-    padding: 0.75rem;
+    padding: 0.5rem;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .md-main {
+    padding: 0.5rem;
+    max-width: 100%;
+    overflow-x: hidden;
   }
 
   .md-typeset .admonition-title {
     font-size: 0.95rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Ensure all headings and text wrap on very small screens */
+  .md-typeset h1 {
+    font-size: 1.5rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.3;
+  }
+
+  .md-typeset h2 {
+    font-size: 1.25rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.3;
+  }
+
+  .md-typeset h3 {
+    font-size: 1.1rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.3;
+  }
+
+  /* Ensure links don't overflow */
+  .md-typeset a {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Server URLs and long text in API docs */
+  .md-typeset code,
+  .md-typeset pre {
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
   }
 }
 
@@ -159,133 +327,164 @@
 /* The API page includes a <swagger-ui> web component whose internal layout
    can overflow on small screens. These rules make summaries wrap and ensure
    panels and code samples are scrollable instead of overlapping. */
+.api-500-wrapper {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .swagger-ui,
 .swagger-ui * {
   box-sizing: border-box;
+  max-width: 100%;
+}
+
+.swagger-ui {
+  width: 100%;
+  max-width: 100%;
 }
 
 .swagger-ui .topbar {
   flex-wrap: wrap;
+  width: 100%;
+  max-width: 100%;
+}
+
+.swagger-ui .info {
+  width: 100%;
+  max-width: 100%;
+  word-wrap: break-word;
 }
 
 .swagger-ui .info .title,
 .swagger-ui .info .description {
   word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 .swagger-ui .opblock-summary {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
+  width: 100%;
+  max-width: 100%;
 }
 
 .swagger-ui .opblock .opblock-summary-method,
 .swagger-ui .opblock .opblock-summary-path {
   white-space: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.swagger-ui .opblock-summary-path {
+  max-width: 100%;
+  word-break: break-all;
 }
 
 /* Make operations and parameters area scroll horizontally instead of overlapping */
 .swagger-ui .opblock-body,
-.swagger-ui .parameters {
+.swagger-ui .parameters,
+.swagger-ui .responses-wrapper,
+.swagger-ui .response-col_status,
+.swagger-ui .response-col_links {
   overflow-x: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+.swagger-ui .parameters-container,
+.swagger-ui .parameters-col_description {
+  max-width: 100%;
+  word-wrap: break-word;
 }
 
 /* Ensure code samples are responsive */
-.swagger-ui pre, .swagger-ui code {
+.swagger-ui pre, 
+.swagger-ui code {
   white-space: pre-wrap;
   word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+
+.swagger-ui pre {
+  overflow-x: auto;
+}
+
+.swagger-ui .model-box,
+.swagger-ui .model-container {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+/* Server URL input and other form elements */
+.swagger-ui .scheme-container,
+.swagger-ui input,
+.swagger-ui select {
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 /* Smaller devices: stack operation summary elements and increase spacing */
-@media (max-width: 720px) {
+@media (max-width: 768px) {
   .swagger-ui .opblock-summary {
     flex-direction: column;
     align-items: stretch;
   }
+  
   .swagger-ui .opblock .opblock-summary-path {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    word-break: break-all;
+  }
+  
+  .swagger-ui .opblock .opblock-summary-method {
+    font-size: 0.85rem;
+  }
+  
+  .swagger-ui .info .title {
+    font-size: 1.5rem;
+  }
+  
+  .swagger-ui .info .description {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .swagger-ui .opblock .opblock-summary-path {
+    font-size: 0.8rem;
+  }
+  
+  .swagger-ui .info .title {
+    font-size: 1.25rem;
+  }
+  
+  .swagger-ui .info .description {
+    font-size: 0.85rem;
   }
 }
 
 /* Redoc-specific fixes in case the component renders Redoc */
-.redoc-wrap, .redoc {
+.redoc-wrap, 
+.redoc {
   max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
 }
-.redoc .menu-content, .redoc .operations-wrapper {
+
+.redoc .menu-content, 
+.redoc .operations-wrapper {
   overflow-x: auto;
+  max-width: 100%;
 }
 
-/* Scoped: Force a 500px "fixed" layout only for the Python backend API page.
-   The wrapper `.api-500-wrapper` is added to `docs/backend/backend_python/api.md`.
-   Only this page will use a 500px min-width and allow horizontal scrolling on
-   very small viewports so other pages remain normal.
-*/
-@media (max-width: 500px) {
-  .api-500-wrapper {
-    min-width: 500px !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch;
-    box-sizing: border-box;
-  }
-
-  /* Ensure Swagger/Redoc components inside the wrapper respect the min-width */
-  .api-500-wrapper .swagger-ui,
-  .api-500-wrapper .redoc,
-  .api-500-wrapper .redoc-wrap {
-    min-width: 500px !important;
-  }
-
-  /* Keep code blocks and tables inside the API wrapper readable; they will scroll inside the pane */
-  .api-500-wrapper table,
-  .api-500-wrapper pre,
-  .api-500-wrapper code {
-    min-width: 500px;
-    overflow-x: auto;
-  }
-}
-
-/* When API page is active, also constrain header/footer to the same 500px
-   so the entire visible page appears as a 500px layout (header/footer included).
-   This is only applied when the body has the `.api-fixed-500` class which is
-   added by a small inline script on the API page. */
-@media (max-width: 500px) {
-  body.api-fixed-500 {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Constrain header, main and footer to the same 500px pane so they appear
-     consistent when the API page forces a fixed layout on small viewports. */
-  body.api-fixed-500 .md-header,
-  body.api-fixed-500 header,
-  body.api-fixed-500 .md-main,
-  body.api-fixed-500 .md-footer,
-  body.api-fixed-500 footer {
-    width: 500px !important;
-    min-width: 500px !important;
-    margin: 0 auto !important;
-    box-sizing: border-box !important;
-    overflow: visible !important;
-  }
-
-  /* Ensure inner containers within header/footer stretch to the 500px width */
-  body.api-fixed-500 .md-header__inner,
-  body.api-fixed-500 .md-footer__inner,
-  body.api-fixed-500 .md-footer-nav,
-  body.api-fixed-500 .md-footer__copyright {
-    width: 100% !important;
-    box-sizing: border-box !important;
-  }
-
-  /* Adjust header inner alignment so actions remain visible within the 500px pane */
-  body.api-fixed-500 .md-header__inner {
-    justify-content: space-between;
-  }
-
-  /* Center the wrapper itself */
-  .api-500-wrapper {
-    margin: 0 auto;
-  }
+.redoc .api-content {
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 @media (max-width: 600px) {
@@ -312,7 +511,6 @@
   }
 }
 
-\
 .md-footer-meta__inner.md-grid {
   display: flex !important;
   flex-direction: column !important;