Enhance dashboard styles (#16884)

* Display sparkline graph on Chrome

* Heatmap auto overflow

* Change grid columns number on small screen

* Please codeclimate bot

* Remove graph height

diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index e903fea56aac6099546ae84b0024908a0ee49772..489646e1fef6c5dadce073d763fd5ea4280a4a3d 100644 (file)
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -920,6 +920,13 @@ a.name-tag,
 }
 
 .retention {
+  overflow: auto;
+
+  > h4 {
+    position: sticky;
+    left: 0;
+  }
+
   &__table {
     &__number {
       color: $secondary-text-color;
@@ -1018,6 +1025,7 @@ a.name-tag,
   &__graph {
     position: absolute;
     bottom: 0;
+    width: 100%;
 
     svg {
       display: block;

diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index cad5a105be769571c9abc3f07aa4eb4734827c95..5e900e8c5135f286a422a1636a6757c0d6229ec5 100644 (file)
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -61,6 +61,10 @@
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
   grid-gap: 10px;
 
+  @media screen and (max-width: 1350px) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
   &__item {
     &--span-double-column {
       grid-column: span 2;