From dcb152aa00f4380da620e4801eada05522814d2d Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Fri, 26 May 2017 12:36:32 +0100
Subject: [PATCH] fix(GUI): don't break up size number in drive selector
 (#1467)

We make the size number in the drive selector stay whole through
the `word-break: keep-all` CSS property, ensuring that it doesn't
partially overflow to the next line.

See: https://github.com/resin-io/etcher/issues/1437
Changelog-Entry: Don't break up size numbers in the drive selector.
---
 lib/gui/components/drive-selector/styles/_drive-selector.scss | 4 ++++
 .../drive-selector/templates/drive-selector-modal.tpl.html    | 4 +++-
 lib/gui/css/main.css                                          | 3 +++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/gui/components/drive-selector/styles/_drive-selector.scss b/lib/gui/components/drive-selector/styles/_drive-selector.scss
index dccdf011..56700037 100644
--- a/lib/gui/components/drive-selector/styles/_drive-selector.scss
+++ b/lib/gui/components/drive-selector/styles/_drive-selector.scss
@@ -78,5 +78,9 @@
     font-size: 11px;
     color: $palette-theme-light-soft-foreground;
   }
+
+  .word-keep {
+    word-break: keep-all;
+  }
 }
 
diff --git a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
index 3525ea63..30f30f2d 100644
--- a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -10,7 +10,9 @@
       ng-dblclick="modal.selectDriveAndClose(drive)"
       ng-click="modal.toggleDrive(drive)">
         <div>
-          <h4 class="list-group-item-heading">{{ drive.description }} - {{ drive.size | gigabyte | number:1 }} GB</h4>
+          <h4 class="list-group-item-heading">{{ drive.description }} -
+            <span class="word-keep">{{ drive.size | gigabyte | number:1 }} GB</span>
+          </h4>
           <p class="list-group-item-text">{{ drive.name }}</p>
 
           <footer class="list-group-item-footer">
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index 6f18bb1e..2cf2cf19 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -6410,6 +6410,9 @@ body {
   font-size: 11px;
   color: #b3b3b3; }
 
+.modal-drive-selector-modal .word-keep {
+  word-break: keep-all; }
+
 /*
  * Copyright 2016 resin.io
  *