From 8773fd901bd4916b649971024c1198342ea3cea3 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Thu, 4 Jul 2019 04:27:30 +0200
Subject: [PATCH] Improve profile stat layout on low resolutions

---
 public/style.css    | 13 ++++++++++---
 src/views/user.nimf |  6 +++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/public/style.css b/public/style.css
index f407c58..ce59d64 100644
--- a/public/style.css
+++ b/public/style.css
@@ -701,10 +701,12 @@ video {
 .profile-card-extra-links {
     margin-top: 8px;
     font-size: 14px;
+    width: 100%;
 }
 
 .profile-statlist {
     display: flex;
+    flex-wrap: wrap;
     margin: 0;
     padding: 0;
     width: 100%;
@@ -716,21 +718,26 @@ video {
 }
 
 .profile-statlist .tweets {
-    flex-shrink: 2;
+    flex: 0.4 1 0;
 }
 
 .profile-statlist .followers {
-    flex-grow: 2;
+    flex: 1 1 0;
+    padding: 0 3px;
 }
 
 .profile-statlist .following {
-    flex-shrink: 1.5;
+    flex: 0.5 1 0;
 }
 
 .profile-stat-header {
     font-weight: bold;
 }
 
+.profile-stat-num {
+    display: block;
+}
+
 .timeline-tweet {
     border-bottom: 1px solid #3e3e35;
 }
diff --git a/src/views/user.nimf b/src/views/user.nimf
index 4d66812..e90f79e 100644
--- a/src/views/user.nimf
+++ b/src/views/user.nimf
@@ -25,15 +25,15 @@
       <ul class="profile-statlist">
         <li class="tweets">
           <span class="profile-stat-header">Tweets</span>
-          <span>${$profile.tweets}</span>
+          <span class="profile-stat-num">${$profile.tweets}</span>
         </li>
         <li class="followers">
           <span class="profile-stat-header">Followers</span>
-          <span>${$profile.followers}</span>
+          <span class="profile-stat-num">${$profile.followers}</span>
         </li>
         <li class="following">
           <span class="profile-stat-header">Following</span>
-          <span>${$profile.following}</span>
+          <span class="profile-stat-num">${$profile.following}</span>
         </li>
       </ul>
     </div>