From 18799d4274cd8f67087ae8d576dde0bf01b58215 Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Fri, 18 Nov 2016 17:28:10 +0000
Subject: [PATCH] fix(GUI): wrap long words in drivelist (#882)

Drives with long names or descriptions expand outside the drivelist,
this commit fixes that using CSS `word-break: break-all`.

Change-Type: patch
Changelog-Entry: Wrap drive names and descriptions in the drive selector widget.
---
 build/css/main.css                                  |  4 ++++
 .../drive-selector/styles/_drive-selector.scss      | 13 +++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/build/css/main.css b/build/css/main.css
index 4b872a6e..0aeefa0e 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -6410,6 +6410,10 @@ body {
 .component-drive-selector-body .list-group-item-footer {
   margin-top: 8px; }
 
+.component-drive-selector-body .list-group-item-heading,
+.component-drive-selector-body .list-group-item-text {
+  word-break: break-all; }
+
 /*
  * Copyright 2016 resin.io
  *
diff --git a/lib/gui/components/drive-selector/styles/_drive-selector.scss b/lib/gui/components/drive-selector/styles/_drive-selector.scss
index 95ea602f..bde65672 100644
--- a/lib/gui/components/drive-selector/styles/_drive-selector.scss
+++ b/lib/gui/components/drive-selector/styles/_drive-selector.scss
@@ -19,6 +19,15 @@
   height: 320px;
 }
 
-.component-drive-selector-body .list-group-item-footer {
-  margin-top: 8px;
+.component-drive-selector-body {
+
+  .list-group-item-footer {
+    margin-top: 8px;
+  }
+
+  .list-group-item-heading,
+  .list-group-item-text {
+    word-break: break-all;
+  }
 }
+