From 73dae93c3fea97918e0022804f22637486905d07 Mon Sep 17 00:00:00 2001
From: aidil-coder-bot <aidilbot@banuacoder.com>
Date: Sat, 28 Mar 2026 06:18:11 +0100
Subject: [PATCH 1/2] hotfix: make math formulas, code blocks, and params table
 scrollable on mobile

- MathFormula: add overflow-x auto + touch scrolling for KaTeX display
- CodeBlock: ensure code-container and code-pre are properly scrollable
- style.css: add mobile-specific overflow fixes for code, table blocks

Fixes horizontal overflow on mobile for JSON responses, math formulas,
and params tables
---
 src/components/CodeBlock.vue   | 15 ++++++++++++---
 src/components/MathFormula.vue | 18 ++++++++++++++++++
 src/style.css                  | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index 1d279d2..afea03d 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -265,8 +265,10 @@ onMounted(() => {
 
 <style scoped>
 .code-block-wrapper {
-  @apply rounded-lg overflow-hidden my-4 transition-colors duration-200;
+  @apply rounded-lg my-4 transition-colors duration-200;
   @apply border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
+  overflow: hidden; /* keep border-radius clipping */
+  max-width: 100%;
 }
 
 .code-block-wrapper.dark-theme {
@@ -319,8 +321,11 @@ onMounted(() => {
 }
 
 .code-container {
-  @apply relative overflow-x-auto;
-  @apply bg-white dark:bg-gray-900;
+  @apply relative bg-white dark:bg-gray-900;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
 }
 
 .dark-theme .code-container {
@@ -331,6 +336,10 @@ onMounted(() => {
   @apply m-0 p-4 text-xs sm:text-sm font-mono leading-relaxed;
   background: transparent !important;
   font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+  white-space: pre;
+  word-break: normal;
+  word-wrap: normal;
+  min-width: min-content;
 }
 
 .code-container code {
diff --git a/src/components/MathFormula.vue b/src/components/MathFormula.vue
index f0fb788..c32b425 100644
--- a/src/components/MathFormula.vue
+++ b/src/components/MathFormula.vue
@@ -33,5 +33,23 @@ const renderedMath = computed(() => {
 .katex-formula {
   display: block;
   text-align: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+  padding-bottom: 4px; /* space for scrollbar */
+}
+
+/* Ensure KaTeX inner elements don't force overflow */
+.katex-formula :deep(.katex-display) {
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+  margin: 0.5em 0;
+}
+
+.katex-formula :deep(.katex-html) {
+  overflow-x: auto;
+  max-width: 100%;
 }
 </style>
diff --git a/src/style.css b/src/style.css
index f95c499..6122d78 100644
--- a/src/style.css
+++ b/src/style.css
@@ -108,6 +108,38 @@ body {
   * { animation: none !important; transition-duration: 0.01ms !important; }
 }
 
+/* Mobile overflow fixes */
+@media (max-width: 768px) {
+  /* Ensure code blocks are scrollable on mobile */
+  .code-block-wrapper,
+  .code-container,
+  .code-panel,
+  .code-panel pre {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
+  }
+
+  /* Ensure params table is scrollable */
+  .params-table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+  }
+
+  .params-table td,
+  .params-table th {
+    white-space: normal;
+    min-width: 80px;
+  }
+
+  .params-table td:last-child {
+    min-width: 150px;
+    white-space: normal;
+  }
+}
+
 /* Dark mode code syntax colors */
 .token-string { color: #a3e4c9; }
 .token-number { color: #f97316; }

From e132081e1e4e093ff9be2ae83230bfde434d4af8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sat, 28 Mar 2026 05:19:59 +0000
Subject: [PATCH 2/2] chore: bump version to 1.5.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9fec0bf..1ea5919 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pico-api-docs",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "PICO SulTeng API Documentation - COVID-19 Sulawesi Tengah Data API",
   "main": "index.js",
   "scripts": {