diff --git a/src/views/pages/marketing/MarketingAnalysis.vue b/src/views/pages/marketing/MarketingAnalysis.vue
index ceb982f..67c404f 100644
--- a/src/views/pages/marketing/MarketingAnalysis.vue
+++ b/src/views/pages/marketing/MarketingAnalysis.vue
@@ -200,18 +200,22 @@
                         <div class="space-y-6">
                             <div v-for="(segment, index) in displayContent" :key="index">
                                 <!-- Two-column pair: paragraph text + adjacent json-chart/table -->
-                                <div v-if="segment.type === 'paired'" class="report-pair" :class="{ 'report-pair--mobile-chart-first': segment.mobileOrder === 'chart-first' }">
-                                    <div class="report-pair__text">
-                                        <div class="markdown-content" v-html="segment.text.html"></div>
-                                    </div>
-
+                                <div
+                                    v-if="segment.type === 'paired'"
+                                    class="report-pair"
+                                    :class="{
+                                        'report-pair--mobile-chart-first': segment.mobileOrder === 'chart-first',
+                                        'report-pair--mobile-text-first': segment.mobileOrder === 'text-first'
+                                    }"
+                                >
+                                    <!-- IMPORTANT: media first so text can wrap around float -->
                                     <div class="report-pair__media">
                                         <div v-if="segment.media.type === 'chart'">
                                             <div class="mb-2" v-if="segment.media.title">
                                                 <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">{{ segment.media.title }}</h3>
                                             </div>
                                             <div class="report-pair__mediaChart">
-                                                <div class="chart-container report-pair__chart-container" :style="pairedChartContainerStyle">
+                                                <div class="chart-container report-pair__chart-container">
                                                     <Chart :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
                                                 </div>
                                             </div>
@@ -231,7 +235,7 @@
                                                 <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-chart-pie mr-2"></i>{{ segment.media.title }}</h3>
                                             </div>
                                             <div class="report-pair__mediaChart">
-                                                <div class="chart-container report-pair__chart-container" :style="pairedChartContainerStyle">
+                                                <div class="chart-container report-pair__chart-container">
                                                     <Chart :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
                                                 </div>
                                             </div>
@@ -269,6 +273,10 @@
                                             </div>
                                         </div>
                                     </div>
+
+                                    <div class="report-pair__text">
+                                        <div class="markdown-content" v-html="segment.text.html"></div>
+                                    </div>
                                 </div>
 
                                 <div v-else-if="segment.type === 'markdown'">
@@ -2895,13 +2903,6 @@ const displayContent = computed(() => {
     return out;
 });
 
-// Compact chart display settings for "side-by-side" (paired) layout
-const PAIRED_CHART_MAX_HEIGHT_PX = 280;
-const pairedChartContainerStyle = {
-    height: `${PAIRED_CHART_MAX_HEIGHT_PX}px`,
-    maxHeight: `${PAIRED_CHART_MAX_HEIGHT_PX}px`
-};
-
 const toCompactChartOptions = (options) => {
     const base = options && typeof options === 'object' ? options : {};
 
@@ -2914,7 +2915,10 @@ const toCompactChartOptions = (options) => {
 
     const compact = {
         ...base,
-        maintainAspectRatio: false,
+        responsive: true,
+        // For this request: keep aspect ratio behavior, but make it visually compact via aspectRatio + CSS max-height
+        maintainAspectRatio: true,
+        aspectRatio: typeof base.aspectRatio === 'number' ? base.aspectRatio : 3,
         layout: {
             ...(base.layout && typeof base.layout === 'object' ? base.layout : {}),
             padding: 0
@@ -3267,49 +3271,64 @@ onBeforeUnmount(() => {
 }
 
 .report-pair {
-    display: flex;
-    /* Don't stretch the media column to the full height of long text */
-    align-items: flex-start;
-    gap: 1.5rem;
+    /* Use text wrapping around the chart to avoid empty whitespace under the chart */
+    display: block;
 }
 
 .report-pair__text,
 .report-pair__media {
-    flex: 1 1 0;
     min-width: 0;
 }
 
-.report-pair__text {
-    flex: 1.5 1 0;
-}
+/* .report-pair__text: text wraps around floated media (no extra styling needed) */
 
 .report-pair__media {
-    flex: 1 1 0;
+    float: right;
+    width: 40%;
     max-width: 40%;
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    min-width: 0;
+    margin-left: 1.5rem; /* gap between text and chart */
+    margin-bottom: 0.75rem; /* let text wrap under after chart ends */
 }
 
 .report-pair__mediaChart {
     width: 100%;
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
 }
 
 .report-pair__chart-container {
     width: 100%;
-    display: flex;
-    align-items: stretch;
-    justify-content: stretch;
+    /* Keep charts compact without forcing wrapper height */
+    max-height: 250px;
+    height: auto;
+    overflow: hidden;
+}
+
+/* clearfix for floated media */
+.report-pair::after {
+    content: '';
+    display: block;
+    clear: both;
+}
+
+/* Remove top/bottom margins inside paired markdown so text starts flush with chart title/area */
+.report-pair__text .markdown-content :deep(> *:first-child) {
+    margin-top: 0 !important;
+}
+.report-pair__text .markdown-content :deep(> *:last-child) {
+    margin-bottom: 0 !important;
+}
+
+/* Ensure Chart.js canvas doesn't add extra whitespace and respects container width */
+.report-pair__chart-container :deep(canvas) {
+    width: 100% !important;
+    height: auto !important;
+    max-height: 250px;
+    display: block;
 }
 
 @media (max-width: 768px) {
     .report-pair {
+        display: flex;
         flex-direction: column;
-        gap: 1rem;
     }
 
     /* Preserve original order when the report had chart before text */
@@ -3321,8 +3340,25 @@ onBeforeUnmount(() => {
     }
 
     .report-pair__media {
-        max-width: none;
+        float: none;
         width: 100%;
+        max-width: none;
+        margin-left: 0;
+        margin-bottom: 0.75rem;
+    }
+
+    /* Preserve original order on mobile */
+    .report-pair--mobile-text-first .report-pair__text {
+        order: 1;
+    }
+    .report-pair--mobile-text-first .report-pair__media {
+        order: 2;
+    }
+    .report-pair--mobile-chart-first .report-pair__media {
+        order: 1;
+    }
+    .report-pair--mobile-chart-first .report-pair__text {
+        order: 2;
     }
 }