Limit card width to fixed size.

Thanks to xet7 !

6 files changed, 19 insertions, 5 deletions

diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl
index efd4367e..3be9c0c3 100644
--- a/client/components/boards/boardColors.styl
+++ b/client/components/boards/boardColors.styl
@@ -241,6 +241,7 @@ setBoardColor(color)
             background-color #ffffff !important
             padding 15px !important
             border 1px solid #000000 !important
+            word-wrap: break-word
 
   // When card has comment, emphasis on minicard:
   // bigger red comment icon and number of comments,
diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index 4bba2d4d..cd475072 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -99,7 +99,9 @@
       &.card-details-item-end,
       &.card-details-item-customfield,
       &.card-details-item-name
-        max-width: 50%
+        display: block
+        word-wrap: break-word
+        max-width: 48%
         flex-grow: 1
 
   .card-details-item-title
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index d48c1851..8ac37a15 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -128,6 +128,9 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
     & .viewer
       p
         margin-bottom: 2px
+        display: block
+        word-wrap: break-word
+        max-width: 420px
 
 .js-delete-checklist-item
   margin: 0 0 0.5em 1.33em
diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
index 3b481d93..9d7c7553 100644
--- a/client/components/cards/labels.styl
+++ b/client/components/cards/labels.styl
@@ -10,9 +10,10 @@
   margin-right: 4px
   margin-bottom: 5px
   padding: 3px 8px
-  max-width: 100%
+  max-width: 210px
   min-width: 8px
   overflow: ellipsis
+  word-wrap: break-word
   height: 18px
   vertical-align: bottom
 
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index f0bb0b39..c4172572 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -93,8 +93,11 @@
   .minicard-custom-field
     display:flex;
   .minicard-custom-field-item
-    max-width:50%;
-    flex-grow:1;
+    flex-grow: 1
+    display: block
+    word-wrap: break-word
+    max-width: 100px
+    margin-right: 4px
   .handle
     width: 20px;
     height: 20px;
@@ -112,7 +115,9 @@
     p:last-child
       margin-bottom: 0
     .viewer
-      display: inline-block
+      display: block
+      word-wrap: break-word
+      max-width: 230px
   .dates
     display: flex;
     flex-direction: row;
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 0955a352..56c35284 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -378,6 +378,8 @@ a
 
 .viewer
   min-height: 18px
+  display: block
+  word-wrap: break-word
 
   ol
     list-style-type: decimal