From 6af16cbc122e81ebee328fdf79a88991f6b0df62 Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Mon, 8 Apr 2019 15:01:46 +0200
Subject: [PATCH] fix(store): better display for long path names

We have a few quite long path names, for which a flat display doesnt make much sense, so I chose to go for a "vertical" display in all cases

Quick question: when was the last time it was deployed? I still don't see my change from #193 when I go to the online version.

Thanks!
---
 store/static/styles.css | 12 +++++-------
 store/views/build.pug   | 14 +++++++++-----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/store/static/styles.css b/store/static/styles.css
index 460be5bf..d954056b 100644
--- a/store/static/styles.css
+++ b/store/static/styles.css
@@ -44,19 +44,17 @@ body {
   display: inline-block;
   word-wrap: break-word;
 }
-.path {
-  width: 20%;
-}
-.threshold {
-  width: 50%;
+.size-wrapper {
+  display: flex;
+  justify-content: flex-end;
 }
 .size {
   text-align: right;
-  width: 15%;
+  margin: 0 .2em;
 }
 .master {
   text-align: right;
-  width: 10%;
+  margin: 0 .2em;
 }
 .bar {
   height: 7px;
diff --git a/store/views/build.pug b/store/views/build.pug
index 9ac6ff18..2afd090f 100644
--- a/store/views/build.pug
+++ b/store/views/build.pug
@@ -18,8 +18,10 @@
         <div class="labels desktop">
           <div class="light label path">PATH</div>
           <div class="light label threshold"></div>
-          <div class="light label size">SIZE/THRESHOLD</div>
-          <div class="light label master">MASTER</div>
+          <div class="size-wrapper">
+            <div class="light label size">SIZE/THRESHOLD</div>
+            <div class="light label master">MASTER</div>
+          </div>
         </div>
         each file in files
           <div class="file">
@@ -28,9 +30,11 @@
               <div class="bar first" style="width: #{file.fillLength * 100 / file.length}%"></div>
               <div class="bar length" style="background-color: #{file.baseColor}"></div>
             </div>
-            <div class="size light">#{file.prettySize}/#{file.prettyMaxSize}#{file.unit}</div>
-            if file.diff
-              <div class="master light"><span class="mobile">master</span> #{file.diff}</div>
+            <div class="size-wrapper">
+              <div class="size light">#{file.prettySize}/#{file.prettyMaxSize}#{file.unit}</div>
+              if file.diff
+                <div class="master light"><span class="mobile">master</span> #{file.diff}</div>
+            </div>
           </div>
       </div>
     </div>