banua-coder · ryanaidilp · Mar 28, 2026 · Mar 28, 2026 · Mar 28, 2026 · Mar 28, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pico-api-docs",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "PICO SulTeng API Documentation - COVID-19 Sulawesi Tengah Data API",
   "main": "index.js",
   "scripts": {

diff --git a/src/components/ApiSection.vue b/src/components/ApiSection.vue
@@ -2,9 +2,9 @@
   <div :id="sectionId" class="border-b border-gray-200 dark:border-gray-800">
     <!-- Section header (full width) -->
     <div class="px-6 py-6 border-b border-gray-200 dark:border-gray-800">
-      <div class="flex items-center space-x-3">
-        <span :class="method === 'GET' ? 'badge-get' : 'badge-post'">{{ method }}</span>
-        <code class="text-sm font-mono text-gray-700 dark:text-gray-300">{{ endpoint }}</code>
+      <div class="flex items-center gap-2 flex-wrap min-w-0">
+        <span :class="method === 'GET' ? 'badge-get' : 'badge-post'" class="shrink-0">{{ method }}</span>
+        <code class="text-sm font-mono text-gray-700 dark:text-gray-300 break-all min-w-0">{{ endpoint }}</code>
       </div>
       <p v-if="description" class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ description }}</p>
     </div>

diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
@@ -267,7 +267,7 @@ onMounted(() => {
 .code-block-wrapper {
   @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 */
+  overflow-x: auto; /* allow horizontal scroll */
   max-width: 100%;
 }
 

diff --git a/src/components/ParamsTable.vue b/src/components/ParamsTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mt-4">
     <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">{{ title || t('docs.table.queryParameters') }}</h4>
-    <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+    <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-x-hidden">
       <div class="overflow-x-auto">
       <table class="params-table">
         <thead>

diff --git a/src/components/documentation/AuthenticationSection.vue b/src/components/documentation/AuthenticationSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.authentication.subtitle') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-yellow-600 to-orange-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-xl sm:text-2xl font-bold text-white mb-2">{{ t('documentation.authentication.title') }}</h2>
         <p class="text-yellow-100">{{ t('documentation.authentication.subtitle') }}</p>

diff --git a/src/components/documentation/ErrorHandlingSection.vue b/src/components/documentation/ErrorHandlingSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.subtitle') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-red-600 to-rose-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-xl sm:text-2xl font-bold text-white mb-2">{{ t('documentation.errorHandling.title') }}</h2>
         <p class="text-red-100">{{ t('documentation.errorHandling.subtitle') }}</p>

diff --git a/src/components/documentation/GlossarySection.vue b/src/components/documentation/GlossarySection.vue
@@ -28,7 +28,7 @@
       <div class="grid lg:grid-cols-2 gap-10 lg:gap-16">
 
         <!-- Left Column -->
-        <div class="space-y-10">
+        <div class="space-y-10 min-w-0 overflow-x-hidden">
 
           <!-- Definition -->
           <div>
@@ -46,17 +46,17 @@
               {{ t('documentation.glossary.reproductionRate.interpretation') }}
             </h3>
             <div class="divide-y divide-gray-100 dark:divide-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
-              <div class="flex items-center gap-4 px-4 py-3 bg-red-50 dark:bg-red-950/40">
-                <span class="font-mono text-sm font-bold text-red-600 dark:text-red-400 w-16 shrink-0">Rt &gt; 1</span>
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.growing') }}</span>
+              <div class="flex items-center gap-3 px-4 py-3 bg-red-50 dark:bg-red-950/40">
+                <span class="font-mono text-sm font-bold text-red-600 dark:text-red-400 w-14 shrink-0">Rt &gt; 1</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300 min-w-0 break-words">{{ t('documentation.glossary.reproductionRate.growing') }}</span>
               </div>
-              <div class="flex items-center gap-4 px-4 py-3 bg-amber-50 dark:bg-amber-950/40">
-                <span class="font-mono text-sm font-bold text-amber-600 dark:text-amber-400 w-16 shrink-0">Rt = 1</span>
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.stable') }}</span>
+              <div class="flex items-center gap-3 px-4 py-3 bg-amber-50 dark:bg-amber-950/40">
+                <span class="font-mono text-sm font-bold text-amber-600 dark:text-amber-400 w-14 shrink-0">Rt = 1</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300 min-w-0 break-words">{{ t('documentation.glossary.reproductionRate.stable') }}</span>
               </div>
-              <div class="flex items-center gap-4 px-4 py-3 bg-green-50 dark:bg-green-950/40">
-                <span class="font-mono text-sm font-bold text-green-600 dark:text-green-400 w-16 shrink-0">Rt &lt; 1</span>
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.declining') }}</span>
+              <div class="flex items-center gap-3 px-4 py-3 bg-green-50 dark:bg-green-950/40">
+                <span class="font-mono text-sm font-bold text-green-600 dark:text-green-400 w-14 shrink-0">Rt &lt; 1</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300 min-w-0 break-words">{{ t('documentation.glossary.reproductionRate.declining') }}</span>
               </div>
             </div>
           </div>
@@ -110,9 +110,10 @@
                       <MathFormula formula="I_{t-s} = \text{incidence at time } (t-s)" />
                       <MathFormula formula="w_s = \text{serial interval probability}" />
                     </template>
-                    <MathFormula
-                      v-else-if="i === 2" formula="R_t | \text{data} \sim \text{Gamma}\left(a + \sum I_t, \, b + \sum \lambda_t\right)"
-                    />
+                    <template v-else-if="i === 2">
+                      <MathFormula formula="R_t \mid \text{data} \sim \text{Gamma}\!\left(a + \textstyle\sum I_t,\right." :display-mode="false" />
+                      <MathFormula formula="\left. b + \textstyle\sum \lambda_t\right)" :display-mode="false" />
+                    </template>
                     <MathFormula
                       v-else formula="\mathbb{E}[R_t | \text{data}] = \frac{a + \sum I_t}{b + \sum \lambda_t}"
                     />
@@ -125,7 +126,7 @@
         </div>
 
         <!-- Right Column -->
-        <div class="space-y-10">
+        <div class="space-y-10 min-w-0 overflow-x-hidden">
 
           <!-- Practical Example -->
           <div>
@@ -184,7 +185,7 @@
                 </div>
 
                 <!-- Bounds -->
-                <div class="grid grid-cols-2 gap-2">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                   <div class="bg-gray-50 dark:bg-gray-900 rounded p-2 border border-gray-200 dark:border-gray-700 space-y-0.5">
                     <p class="font-sans font-semibold text-gray-700 dark:text-gray-300 text-[10px] uppercase tracking-wide">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.title') }}</p>
                     <p class="text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.formula') }}</p>
@@ -273,7 +274,7 @@
 
       <div class="grid md:grid-cols-2 gap-10 lg:gap-16">
         <!-- Case Classifications -->
-        <div>
+        <div class="min-w-0 overflow-x-hidden">
           <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-5">
             {{ t('documentation.glossary.caseClassifications.title') }}
           </h3>

diff --git a/src/components/documentation/HealthCheckSection.vue b/src/components/documentation/HealthCheckSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.healthCheck.description') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <!-- Endpoint Header -->
       <div class="bg-gradient-to-r from-emerald-500 to-green-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center gap-4">

diff --git a/src/components/documentation/HospitalsSection.vue b/src/components/documentation/HospitalsSection.vue
@@ -6,7 +6,7 @@
     </div>
 
     <!-- List Hospitals -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden mb-8">
       <div class="bg-gradient-to-r from-red-500 to-pink-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>
@@ -66,7 +66,7 @@
     </div>
 
     <!-- Get Hospital by Code -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-pink-600 to-rose-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>

diff --git a/src/components/documentation/NationalHistoricalSection.vue b/src/components/documentation/NationalHistoricalSection.vue
@@ -26,7 +26,7 @@
     </div>
 
     <!-- Endpoint Details -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center gap-4">
           <span class="bg-white text-purple-700 px-3 py-1 rounded-lg font-mono text-sm font-bold">GET</span>

diff --git a/src/components/documentation/NationalLatestSection.vue b/src/components/documentation/NationalLatestSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.nationalLatest.description') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <!-- Endpoint Header -->
       <div class="bg-gradient-to-r from-pico-blue to-pico-deep px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center gap-4">

diff --git a/src/components/documentation/OverviewSection.vue b/src/components/documentation/OverviewSection.vue
@@ -14,7 +14,7 @@
     </div>
 
     <!-- Getting Started Card -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-white mb-1 sm:mb-2">{{ t('documentation.overview.gettingStarted') }}</h2>
         <p class="text-sm sm:text-base text-blue-100">{{ t('documentation.overview.gettingStartedSub') }}</p>

diff --git a/src/components/documentation/ProvinceCasesSection.vue b/src/components/documentation/ProvinceCasesSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.provinceCases.description') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-xl sm:text-2xl font-bold text-white mb-2">{{ t('documentation.provinceCases.endpoints') }}</h2>
         <p class="text-purple-100">{{ t('documentation.provinceCases.description') }}</p>

diff --git a/src/components/documentation/ProvincesSection.vue b/src/components/documentation/ProvincesSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.provinces.description') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-xl sm:text-2xl font-bold text-white mb-2">{{ t('documentation.provinces.endpoint') }}</h2>
         <p class="text-indigo-100">{{ t('documentation.provinces.description') }}</p>

diff --git a/src/components/documentation/RegenciesSection.vue b/src/components/documentation/RegenciesSection.vue
@@ -6,7 +6,7 @@
     </div>
 
     <!-- List Regencies -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden mb-8">
       <div class="bg-gradient-to-r from-blue-600 to-cyan-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>
@@ -65,7 +65,7 @@
     </div>
 
     <!-- Get Regency by ID -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden mb-8">
       <div class="bg-gradient-to-r from-indigo-600 to-blue-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>
@@ -99,7 +99,7 @@
     </div>
 
     <!-- Get Regency Cases -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>

diff --git a/src/components/documentation/RootEndpointSection.vue b/src/components/documentation/RootEndpointSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.rootEndpoint.description') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <!-- Endpoint Header -->
       <div class="bg-gradient-to-r from-pico-sky to-pico-blue px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center gap-4">

diff --git a/src/components/documentation/StatisticsSection.vue b/src/components/documentation/StatisticsSection.vue
@@ -6,7 +6,7 @@
     </div>
 
     <!-- Gender Cases -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden mb-8">
       <div class="bg-gradient-to-r from-violet-600 to-purple-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>
@@ -28,7 +28,7 @@
     </div>
 
     <!-- Latest Gender Case -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden mb-8">
       <div class="bg-gradient-to-r from-purple-600 to-fuchsia-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>
@@ -52,7 +52,7 @@
     </div>
 
     <!-- Tests -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden mb-8">
       <div class="bg-gradient-to-r from-fuchsia-600 to-pink-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>
@@ -74,7 +74,7 @@
     </div>
 
     <!-- Test Types -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-pink-600 to-rose-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>

diff --git a/src/components/documentation/TaskForcesSection.vue b/src/components/documentation/TaskForcesSection.vue
@@ -5,7 +5,7 @@
       <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.taskForces.description') }}</p>
     </div>
 
-    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-x-hidden">
       <div class="bg-gradient-to-r from-orange-500 to-amber-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <div class="flex items-center space-x-3 mb-2">
           <span class="bg-green-400 text-green-900 text-xs font-bold px-2 py-1 rounded">GET</span>