|
28 | 28 | <div class="grid lg:grid-cols-2 gap-10 lg:gap-16"> |
29 | 29 |
|
30 | 30 | <!-- Left Column --> |
31 | | - <div class="space-y-10"> |
| 31 | + <div class="space-y-10 min-w-0 overflow-x-hidden"> |
32 | 32 |
|
33 | 33 | <!-- Definition --> |
34 | 34 | <div> |
|
46 | 46 | {{ t('documentation.glossary.reproductionRate.interpretation') }} |
47 | 47 | </h3> |
48 | 48 | <div class="divide-y divide-gray-100 dark:divide-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"> |
49 | | - <div class="flex items-center gap-4 px-4 py-3 bg-red-50 dark:bg-red-950/40"> |
50 | | - <span class="font-mono text-sm font-bold text-red-600 dark:text-red-400 w-16 shrink-0">Rt > 1</span> |
51 | | - <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.growing') }}</span> |
| 49 | + <div class="flex items-center gap-3 px-4 py-3 bg-red-50 dark:bg-red-950/40"> |
| 50 | + <span class="font-mono text-sm font-bold text-red-600 dark:text-red-400 w-14 shrink-0">Rt > 1</span> |
| 51 | + <span class="text-sm text-gray-700 dark:text-gray-300 min-w-0 break-words">{{ t('documentation.glossary.reproductionRate.growing') }}</span> |
52 | 52 | </div> |
53 | | - <div class="flex items-center gap-4 px-4 py-3 bg-amber-50 dark:bg-amber-950/40"> |
54 | | - <span class="font-mono text-sm font-bold text-amber-600 dark:text-amber-400 w-16 shrink-0">Rt = 1</span> |
55 | | - <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.stable') }}</span> |
| 53 | + <div class="flex items-center gap-3 px-4 py-3 bg-amber-50 dark:bg-amber-950/40"> |
| 54 | + <span class="font-mono text-sm font-bold text-amber-600 dark:text-amber-400 w-14 shrink-0">Rt = 1</span> |
| 55 | + <span class="text-sm text-gray-700 dark:text-gray-300 min-w-0 break-words">{{ t('documentation.glossary.reproductionRate.stable') }}</span> |
56 | 56 | </div> |
57 | | - <div class="flex items-center gap-4 px-4 py-3 bg-green-50 dark:bg-green-950/40"> |
58 | | - <span class="font-mono text-sm font-bold text-green-600 dark:text-green-400 w-16 shrink-0">Rt < 1</span> |
59 | | - <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.declining') }}</span> |
| 57 | + <div class="flex items-center gap-3 px-4 py-3 bg-green-50 dark:bg-green-950/40"> |
| 58 | + <span class="font-mono text-sm font-bold text-green-600 dark:text-green-400 w-14 shrink-0">Rt < 1</span> |
| 59 | + <span class="text-sm text-gray-700 dark:text-gray-300 min-w-0 break-words">{{ t('documentation.glossary.reproductionRate.declining') }}</span> |
60 | 60 | </div> |
61 | 61 | </div> |
62 | 62 | </div> |
|
110 | 110 | <MathFormula formula="I_{t-s} = \text{incidence at time } (t-s)" /> |
111 | 111 | <MathFormula formula="w_s = \text{serial interval probability}" /> |
112 | 112 | </template> |
113 | | - <MathFormula |
114 | | - v-else-if="i === 2" formula="R_t | \text{data} \sim \text{Gamma}\left(a + \sum I_t, \, b + \sum \lambda_t\right)" |
115 | | - /> |
| 113 | + <template v-else-if="i === 2"> |
| 114 | + <MathFormula formula="R_t \mid \text{data} \sim \text{Gamma}\!\left(a + \textstyle\sum I_t,\right." :display-mode="false" /> |
| 115 | + <MathFormula formula="\left. b + \textstyle\sum \lambda_t\right)" :display-mode="false" /> |
| 116 | + </template> |
116 | 117 | <MathFormula |
117 | 118 | v-else formula="\mathbb{E}[R_t | \text{data}] = \frac{a + \sum I_t}{b + \sum \lambda_t}" |
118 | 119 | /> |
|
125 | 126 | </div> |
126 | 127 |
|
127 | 128 | <!-- Right Column --> |
128 | | - <div class="space-y-10"> |
| 129 | + <div class="space-y-10 min-w-0 overflow-x-hidden"> |
129 | 130 |
|
130 | 131 | <!-- Practical Example --> |
131 | 132 | <div> |
|
184 | 185 | </div> |
185 | 186 |
|
186 | 187 | <!-- Bounds --> |
187 | | - <div class="grid grid-cols-2 gap-2"> |
| 188 | + <div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> |
188 | 189 | <div class="bg-gray-50 dark:bg-gray-900 rounded p-2 border border-gray-200 dark:border-gray-700 space-y-0.5"> |
189 | 190 | <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> |
190 | 191 | <p class="text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.formula') }}</p> |
|
273 | 274 |
|
274 | 275 | <div class="grid md:grid-cols-2 gap-10 lg:gap-16"> |
275 | 276 | <!-- Case Classifications --> |
276 | | - <div> |
| 277 | + <div class="min-w-0 overflow-x-hidden"> |
277 | 278 | <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-5"> |
278 | 279 | {{ t('documentation.glossary.caseClassifications.title') }} |
279 | 280 | </h3> |
|
0 commit comments