From cf4be44a3ed19c853d815fed467767cdbf339e21 Mon Sep 17 00:00:00 2001
From: lowlighter <22963968+lowlighter@users.noreply.github.com>
Date: Sun, 28 Aug 2022 11:36:48 -0400
Subject: [PATCH] fix(app/insights): display issues for small screen [skip ci]

---
 source/app/web/statics/insights/index.html |  2 +-
 source/app/web/statics/insights/style.css  | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/source/app/web/statics/insights/index.html b/source/app/web/statics/insights/index.html
index 247aa529..f3fa29c8 100644
--- a/source/app/web/statics/insights/index.html
+++ b/source/app/web/statics/insights/index.html
@@ -346,7 +346,7 @@
             <div class="loading" v-if="!loaded.includes('calendar')">Fetching data</div>
             <template v-else-if="(calendar)&&(calendar.years?.length > 1)">
               <p>
-                Below is the full commit history of <b>{{ user }}</b> between {{ calendar.years[0].year }} and {{ calendar.years[calendar.years.length-1].year }}.
+                Below is the full commit history of <b>{{ user }}</b> between {{ calendar.years[calendar.years.length-1].year }} and {{ calendar.years[0].year }}.
                 <small class="footnote">
                   Note that commits prior <b>{{ user }}</b>'s registration date on GitHub are not displayed.
                 </small>
diff --git a/source/app/web/statics/insights/style.css b/source/app/web/statics/insights/style.css
index c8dd912b..c1ca50f4 100644
--- a/source/app/web/statics/insights/style.css
+++ b/source/app/web/statics/insights/style.css
@@ -117,6 +117,9 @@
   }
 
 /* Activity */
+  .activity {
+    max-width: 90vw;
+  }
   .activity > ul {
     padding: 0;
     margin: 0;
@@ -317,6 +320,7 @@
   .reactions {
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
   }
 
   .reactions > div {
@@ -339,7 +343,7 @@
     flex-direction: column;
     width: 100%;
     margin: .5rem;
-    max-width: 416px;
+    max-width: 90vw;
     border-radius: .25rem;
     border: 1px solid var(--color-border-primary);
     padding: .5rem .5rem 0;
@@ -350,6 +354,9 @@
     align-items: center;
     margin-bottom: .5rem;
   }
+  .repository .field.infos {
+    flex-wrap: wrap;
+  }
   .repository svg {
     fill: currentColor;
   }
@@ -610,6 +617,9 @@
     .search {
       width: 520px;
     }
+    .repository {
+      max-width: 416px;
+    }
   }
 
 /* Loading bar */