Fix heatmap rendering in Chrome and Safari (#13645)

* Fix heatmap rendering in Chrome and Safari

Apparently SVG inside flexbox renders slightly different across browsers
where Firefox would stretch to fit the parent while Chrome and safari
wouldn't. Stretch the SVG to the width of the parent for consistent
rendering.

Also did a few minor tweaks on the min-height of the box so it takes up
less space on smaller responsive breakpoints.

Fixes: https://github.com/go-gitea/gitea/issues/13634
Fixes: https://github.com/go-gitea/gitea/pull/13637
* position tweak

Co-authored-by: zeripath <art27@cantab.net>

diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less
index 61db5c81b02e5ca79bb49ad79cd3f8f84e279a46..f82f3d12cdbd940cdee9fe981f7de58d66c939f7 100644 (file)
--- a/web_src/less/features/heatmap.less
+++ b/web_src/less/features/heatmap.less
@@ -7,6 +7,10 @@
   align-items: center;
   justify-content: center;
 
+  > svg {
+    width: 100%;
+  }
+
   svg:not(:root) {
     overflow: inherit;
     padding: 0 !important;
@@ -16,13 +20,6 @@
     fill: currentColor !important;
   }
 
-  @media @mediaLgAndDown {
-    &,
-    & + .divider {
-      display: none;
-    }
-  }
-
   .total-contributions {
     font-size: 11px;
     position: absolute;
@@ -31,16 +28,22 @@
   }
 
   @media @mediaLgAndDown {
+    & {
+      min-height: 105px;
+    }
     .total-contributions {
       left: 21px;
     }
   }
 
   @media (max-width: 1000px) {
+    & {
+      min-height: 80px;
+    }
     .total-contributions {
       font-size: 10px;
       left: 17px;
-      bottom: -2px;
+      bottom: -4px;
     }
   }
 }
@@ -48,3 +51,15 @@
 .user.profile #user-heatmap {
   min-height: 135px;
 }
+
+@media @mediaLgAndDown {
+  .user.profile #user-heatmap {
+    min-height: 115px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .user.profile #user-heatmap {
+    min-height: 90px;
+  }
+}