feat: add mobile word wrap functionality and improve image responsiveness

Author: mohamedhadri

docusaurus.config.js

@@ -28,6 +28,11 @@ const config = {
 	onBrokenLinks: "throw",
 	onBrokenMarkdownLinks: "warn",
 
+	// Client modules - scripts that run on the client side
+	clientModules: [
+		require.resolve('./src/js/mobileWordWrap.js'),
+	],
+
 	// Even if you don't use internationalization, you can use this field to set
 	// useful metadata like html lang. For example, if your site is Chinese, you
 	// may want to replace "en" with "zh-Hans".

src/css/custom.css

@@ -144,23 +144,12 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 
 /* Image Responsiveness */
 @media (max-width: 996px) {
-  /* Make all images responsive */
-  img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-  }
-  
-  /* Ensure markdown images are responsive */
-  .markdown img {
-    max-width: 100%;
-    height: auto;
-  }
-  
-  /* Handle images in content */
+  /* Make content images responsive */
+  .markdown img,
   .theme-doc-markdown img {
     max-width: 100%;
     height: auto;
+    display: block;
   }
 
   /* Responsive image containers */
@@ -171,6 +160,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   }
 }
 
+/* Footer logo sizing on mobile – prevent oversized logo */
+@media (max-width: 996px) {
+  .footer .footer__logo img,
+  .footer .footer__logo {
+    max-width: 72px;
+    width: 72px;
+    height: auto;
+  }
+}
+
 /* Navigation Menu Improvements for Mobile */
 @media (max-width: 996px) {
   /* Improve mobile menu button visibility */
@@ -199,6 +198,27 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   }
 }
 
+/* Pagination (Prev/Next) – prevent cut off on mobile */
+@media (max-width: 996px) {
+  /* Add small horizontal padding to the whole block to keep cards inside viewport */
+  .pagination-nav {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  /* Remove extra margins that cause overflow when each item is 50% width */
+  .pagination-nav__link {
+    margin: 0;
+  }
+
+  /* Ensure box sizing doesn't overflow and keep a tiny gap */
+  .pagination-nav__item {
+    box-sizing: border-box;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+}
+
 /* Table Responsiveness */
 @media (max-width: 996px) {
   /* Make tables scrollable horizontally on mobile */
@@ -271,7 +291,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   a.button {
     min-height: 40px;
     min-width: 40px;
-    padding: 0.75rem 1.25rem;
   }
 
   /* Add flex display to clean-btn for better layout */

src/js/mobileWordWrap.js

@@ -0,0 +1,83 @@
+/**
+ * Automatically enable word wrap in code blocks on mobile devices
+ * This script clicks the word wrap button when the page loads on mobile screens
+ */
+
+function enableWordWrapOnMobile() {
+  // Check if we're on a mobile device (screen width <= 996px)
+  if (window.innerWidth <= 996) {
+    // Wait for the DOM to be fully loaded and code blocks to render
+    setTimeout(() => {
+      // Find all word wrap buttons
+      // The button has class 'clean-btn' and when enabled also has 'wordWrapButtonEnabled_*'
+      const wordWrapButtons = document.querySelectorAll('.clean-btn[aria-label*="word wrap"], .clean-btn[aria-label*="Word wrap"], .clean-btn[title*="word wrap"], .clean-btn[title*="Word wrap"]');
+      
+      wordWrapButtons.forEach(button => {
+        // Check if the button is NOT already enabled
+        // When enabled, it has a class containing 'wordWrapButtonEnabled'
+        const isEnabled = Array.from(button.classList).some(className => 
+          className.includes('wordWrapButtonEnabled')
+        );
+        
+        if (!isEnabled) {
+          // Click the button to enable word wrap
+          button.click();
+        }
+      });
+    }, 500); // Wait 500ms for code blocks to render
+  }
+}
+
+// Run on initial page load
+if (typeof window !== 'undefined') {
+  // Execute when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', enableWordWrapOnMobile);
+  } else {
+    enableWordWrapOnMobile();
+  }
+  
+  // Also run when navigating between pages (Docusaurus uses client-side routing)
+  window.addEventListener('popstate', enableWordWrapOnMobile);
+  
+  // Listen for route changes in Docusaurus
+  if (window.docusaurus) {
+    window.docusaurus.prefetch = function() {
+      // Hook into Docusaurus navigation
+      enableWordWrapOnMobile();
+    };
+  }
+  
+  // Use MutationObserver to detect when new code blocks are added to the page
+  const observer = new MutationObserver((mutations) => {
+    let shouldCheck = false;
+    
+    mutations.forEach((mutation) => {
+      if (mutation.addedNodes.length > 0) {
+        mutation.addedNodes.forEach((node) => {
+          // Check if a code block or button was added
+          if (node.nodeType === 1) { // Element node
+            if (node.matches && (
+              node.matches('.theme-code-block') || 
+              node.matches('.clean-btn') ||
+              node.querySelector('.theme-code-block') ||
+              node.querySelector('.clean-btn')
+            )) {
+              shouldCheck = true;
+            }
+          }
+        });
+      }
+    });
+    
+    if (shouldCheck) {
+      enableWordWrapOnMobile();
+    }
+  });
+  
+  // Start observing the document body for changes
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+}