fix(server): show diff inside bar in narrow situations

GoogleChrome · Oct 15, 2019 · 2d4f0db · 2d4f0db
1 parent 142dda5
commit 2d4f0db
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.css b/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.css
@@ -29,19 +29,19 @@
   background: repeating-linear-gradient(
     60deg,
     var(--improvement-color),
-    var(--improvement-color) 2px,
-    var(--secondary-background-color) 2px,
-    var(--secondary-background-color) 4px
+    var(--improvement-color) 1px,
+    var(--secondary-background-color) 1px,
+    var(--secondary-background-color) 3px
   );
 }
 .audit-numeric-diff__box--regression {
   color: var(--regression-color);
   background: repeating-linear-gradient(
     60deg,
     var(--regression-color),
-    var(--regression-color) 2px,
-    var(--secondary-background-color) 2px,
-    var(--secondary-background-color) 4px
+    var(--regression-color) 1px,
+    var(--secondary-background-color) 1px,
+    var(--secondary-background-color) 3px
   );
 }
 
@@ -68,6 +68,22 @@
   align-items: center;
 }
 
+.audit-numeric-diff__delta-label--narrow-left {
+  left: 2px;
+  right: initial !important;
+
+  background: var(--secondary-background-color);
+  opacity: 0.8;
+}
+
+.audit-numeric-diff__delta-label--narrow-right {
+  left: initial !important;
+  right: 2px;
+
+  background: var(--secondary-background-color);
+  opacity: 0.8;
+}
+
 .audit-numeric-diff__left-label,
 .audit-numeric-diff__right-label {
   width: 60px;

diff --git a/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.jsx b/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.jsx
@@ -132,7 +132,12 @@ export const NumericDiff = props => {
               style={{left: minValueIsCurrentValue ? '0%' : '100%'}}
             />
             <div
-              className="audit-numeric-diff__delta-label"
+              className={clsx('audit-numeric-diff__delta-label', {
+                'audit-numeric-diff__delta-label--narrow-left':
+                  deltaType === 'improvement' && boxLeft < 20,
+                'audit-numeric-diff__delta-label--narrow-right':
+                  deltaType === 'regression' && boxRight < 20,
+              })}
               style={{[minValueIsCurrentValue ? 'right' : 'left']: '100%'}}
             >
               {toDisplay(delta, {asDelta: true, withSuffix: true, unit})}