use special class

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">
+		<div class="flex-container-main activity-heatmap-container">
 			{{template "base/alert" .}}
 			{{template "user/heatmap" .}}
 			{{if .Page.Paginater.TotalPages}}

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">
+			<div class="ui twelve wide column tw-mb-4 activity-heatmap-container">
 				{{template "user/overview/header" .}}
 				{{if eq .TabName "activity"}}
 					{{if .ContextUser.KeepActivityPrivate}}

web_src/css/features/heatmap.css

@@ -4,8 +4,12 @@
   position: relative;
 }
 
+.activity-heatmap-container {
+  container: activity-heatmap-container / inline-size;
+}
+
 @supports (container-type: inline-size) {
-  @container (width > 0) {
+  @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. */

web_src/css/modules/flexcontainer.css

@@ -19,7 +19,6 @@
 .flex-container-main {
   flex: 1;
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
-  container-type: inline-size;
 }
 
 @media (max-width: 767.98px) {

web_src/css/modules/grid.css

@@ -135,10 +135,6 @@
   }
 }
 
-.ui.grid .column {
-  container-type: inline-size;
-}
-
 .ui.grid > .column:only-child,
 .ui.grid > .row > .column:only-child {
   width: 100%;