fix: set a max width on quadrant wrapper

Author: graphieros

app/components/Compare/FacetQuadrantChart.vue

@@ -202,14 +202,15 @@ const config = computed<VueUiQuadrantConfig>(() => {
           },
           labels: {
             axisLabels: {
-              fontSize: 12,
+              fontSize: 14,
               color: {
                 positive: colors.value.fgSubtle,
                 negative: colors.value.fgSubtle,
               },
             },
             plotLabels: {
-              offsetY: 12,
+              fontSize: 14,
+              offsetY: 16,
               color: colors.value.fg,
             },
             quadrantLabels: {

app/pages/compare.vue

@@ -354,11 +354,13 @@ useSeoMeta({
               <p v-else class="py-12 text-center text-fg-subtle">
                 {{ $t('compare.packages.no_chartable_data') }}
               </p>
-              <FacetQuadrantChart
-                v-if="packages.length"
-                :packages-data="packagesData"
-                :packages="packages"
-              />
+              <div class="max-w-[450px] mx-auto">
+                <FacetQuadrantChart
+                  v-if="packages.length"
+                  :packages-data="packagesData"
+                  :packages="packages"
+                />
+              </div>
             </TabPanel>
           </TabRoot>