use dedicated container

Author: silverwind

templates/user/dashboard/dashboard.tmpl

@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds">
 	{{template "user/dashboard/navbar" .}}
 	<div class="ui container flex-container">
-		<div class="flex-container-main activity-heatmap-container">
+		<div class="flex-container-main">
 			{{template "base/alert" .}}
 			{{template "user/heatmap" .}}
 			{{if .Page.Paginater.TotalPages}}

templates/user/heatmap.tmpl

@@ -1,10 +1,12 @@
 {{if .HeatmapData}}
-	<div id="user-heatmap" class="is-loading"
-		data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
-		data-locale-total-contributions="{{ctx.Locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" (ctx.Locale.PrettyNumber .HeatmapTotalContributions)}}"
-		data-locale-no-contributions="{{ctx.Locale.Tr "heatmap.no_contributions"}}"
-		data-locale-more="{{ctx.Locale.Tr "heatmap.more"}}"
-		data-locale-less="{{ctx.Locale.Tr "heatmap.less"}}"
-	></div>
-	<div class="divider"></div>
+	<div class="activity-heatmap-container">
+		<div id="user-heatmap" class="is-loading"
+			data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
+			data-locale-total-contributions="{{ctx.Locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" (ctx.Locale.PrettyNumber .HeatmapTotalContributions)}}"
+			data-locale-no-contributions="{{ctx.Locale.Tr "heatmap.no_contributions"}}"
+			data-locale-more="{{ctx.Locale.Tr "heatmap.more"}}"
+			data-locale-less="{{ctx.Locale.Tr "heatmap.less"}}"
+		></div>
+		<div class="divider"></div>
+	</div>
 {{end}}

templates/user/profile.tmpl

@@ -5,7 +5,7 @@
 			<div class="ui four wide column">
 				{{template "shared/user/profile_big_avatar" .}}
 			</div>
-			<div class="ui twelve wide column tw-mb-4 activity-heatmap-container">
+			<div class="ui twelve wide column tw-mb-4">
 				{{template "user/overview/header" .}}
 				{{if eq .TabName "activity"}}
 					{{if .ContextUser.KeepActivityPrivate}}

web_src/css/features/heatmap.css

@@ -4,16 +4,15 @@
   position: relative;
 }
 
-@supports (container-type: inline-size) {
-  .activity-heatmap-container {
-    container: activity-heatmap-container / inline-size;
-  }
-  @container activity-heatmap-container (width > 0) {
-    #user-heatmap {
-      /* Set element to fixed height so that it does not resize after load. The calculation is complex
-         because the element does not scale with a fixed aspect ratio. */
-      height: calc((100cqw / 5) - (100cqw / 25) + 20px);
-    }
+.activity-heatmap-container {
+  container-type: inline-size;
+}
+
+@container (width > 0) {
+  #user-heatmap {
+    /* Set element to fixed height so that it does not resize after load. The calculation is complex
+       because the element does not scale with a fixed aspect ratio. */
+    height: calc((100cqw / 5) - (100cqw / 25) + 20px);
   }
 }