Merge pull request #101 from banua-coder/hotfix/1.5.1

hotfix(1.5.1): make math formulas, code blocks, and params table scrollable on mobile

Author: ryanaidilp

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": {

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 {

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>

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; }