Contribution heatmap improvements (#35876) (#35880)

Backport #35876 by @silverwind

1. Set a fixed height on the element, preventing the content after the
element from shifting on page load. This uses CSS [container query
length
units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units)
as I saw no other way because of the non-linear scaling of the element.
2. Move the "total-contributions" text into the existing vue slot,
eliminating the need for absolute positioning.

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/components/ActivityHeatmap.vue

@@ -53,9 +53,6 @@ function handleDayClick(e: Event & {date: Date}) {
 }
 </script>
 <template>
-  <div class="total-contributions">
-    {{ locale.textTotalContributions }}
-  </div>
   <calendar-heatmap
     :locale="locale.heatMapLocale"
     :no-data-text="locale.noDataText"
@@ -65,5 +62,7 @@ function handleDayClick(e: Event & {date: Date}) {
     :range-color="colorRange"
     @day-click="handleDayClick($event)"
     :tippy-props="{theme: 'tooltip'}"
-  />
+  >
+    <template #vch__legend-left>{{ locale.textTotalContributions }}</template>
+  </calendar-heatmap>
 </template>