From 54ee73e25ed12fe75a02e7bb48525ff7030cdf86 Mon Sep 17 00:00:00 2001
From: maikelkoopman <maikelkoopman@goalgorilla.com>
Date: Thu, 21 Sep 2017 14:21:54 +0200
Subject: [PATCH] Issue #2896187 by maikelkoopman: wrap list-item labels and
 texts correct

---
 themes/socialbase/assets/css/input-groups.css            | 2 +-
 themes/socialbase/assets/css/list.css                    | 9 +++++++++
 .../socialbase/components/02-atoms/list/list-label.twig  | 2 +-
 themes/socialbase/components/02-atoms/list/list.scss     | 6 ++++++
 .../socialbase/templates/node/entity-add-list.html.twig  | 2 +-
 themes/socialbase/templates/node/node-add-list.html.twig | 2 +-
 .../profile/profile--profile--default.html.twig          | 6 +++---
 7 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/themes/socialbase/assets/css/input-groups.css b/themes/socialbase/assets/css/input-groups.css
index a3fc1625639..fde9f12c9b9 100644
--- a/themes/socialbase/assets/css/input-groups.css
+++ b/themes/socialbase/assets/css/input-groups.css
@@ -122,4 +122,4 @@
 
 .input-group-expanded {
   max-width: none;
-}
\ No newline at end of file
+}
diff --git a/themes/socialbase/assets/css/list.css b/themes/socialbase/assets/css/list.css
index eae69112e41..04165502eca 100644
--- a/themes/socialbase/assets/css/list.css
+++ b/themes/socialbase/assets/css/list.css
@@ -29,6 +29,14 @@
       flex-basis: 44px;
 }
 
+.list-item--withlabel {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+
 .list-item__label {
   margin-right: 20px;
   font-weight: 500;
@@ -42,6 +50,7 @@
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
+  max-width: 100%;
   margin: 0;
   line-height: 1.25;
 }
diff --git a/themes/socialbase/components/02-atoms/list/list-label.twig b/themes/socialbase/components/02-atoms/list/list-label.twig
index baff2551f63..1e1fae9ac8d 100644
--- a/themes/socialbase/components/02-atoms/list/list-label.twig
+++ b/themes/socialbase/components/02-atoms/list/list-label.twig
@@ -1,5 +1,5 @@
 {% for label, value in data %}
-  <div class="list-item">
+  <div class="list-item list-item--withlabel">
     <span class="list-item__label">
       {{ label }}
     </span>
diff --git a/themes/socialbase/components/02-atoms/list/list.scss b/themes/socialbase/components/02-atoms/list/list.scss
index 64dac895052..053dab04cd6 100644
--- a/themes/socialbase/components/02-atoms/list/list.scss
+++ b/themes/socialbase/components/02-atoms/list/list.scss
@@ -58,6 +58,11 @@
   flex-basis: 44px;
 }
 
+.list-item--withlabel {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
 .list-item__label {
   margin-right: 20px;
   font-weight: 500;
@@ -70,6 +75,7 @@
 
 .list-item__text {
   flex-grow: 1;
+  max-width: 100%;
   margin: 0;
   line-height: 1.25;
 
diff --git a/themes/socialbase/templates/node/entity-add-list.html.twig b/themes/socialbase/templates/node/entity-add-list.html.twig
index 561d1a356d6..c7eccdd1ceb 100644
--- a/themes/socialbase/templates/node/entity-add-list.html.twig
+++ b/themes/socialbase/templates/node/entity-add-list.html.twig
@@ -20,7 +20,7 @@
   <div class="card">
     <div class="card__block">
       {% for bundle in bundles %}
-        <dl class="list-item">
+        <dl class="list-item list-item--withlabel">
           <dt class="list-item__label"><span class="btn btn-link">{{ bundle.add_link }}</span></dt>
           <dd class="list-item__text">{{ bundle.description }}</dd>
         </dl>
diff --git a/themes/socialbase/templates/node/node-add-list.html.twig b/themes/socialbase/templates/node/node-add-list.html.twig
index 8443c27718d..c38c499f8da 100644
--- a/themes/socialbase/templates/node/node-add-list.html.twig
+++ b/themes/socialbase/templates/node/node-add-list.html.twig
@@ -21,7 +21,7 @@
     {% if types is not empty %}
 
       {% for type in types %}
-        <dl class="list-item">
+        <dl class="list-item list-item--withlabel">
           <dt class="list-item__label"><span class="btn btn-flat">{{ type.add_link }}</span></dt>
           <dd class="list-item__text">{{ type.description }}</dd>
         </dl>
diff --git a/themes/socialbase/templates/profile/profile--profile--default.html.twig b/themes/socialbase/templates/profile/profile--profile--default.html.twig
index 3dfc7602a42..89d3963a33b 100644
--- a/themes/socialbase/templates/profile/profile--profile--default.html.twig
+++ b/themes/socialbase/templates/profile/profile--profile--default.html.twig
@@ -73,21 +73,21 @@
     {% endif %}
 
     {% if content.field_profile_phone_number|render %}
-      <div class="list-item">
+      <div class="list-item list-item--withlabel">
           <div class="list-item__label">{% trans %}Phone{% endtrans %}</div>
           <div class="list-item__text">{{ content.field_profile_phone_number }}</div>
       </div>
     {% endif %}
 
     {% if user_mail %}
-      <div class="list-item">
+      <div class="list-item list-item--withlabel">
           <div class="list-item__label">{% trans %}E-mail{% endtrans %}</div>
           <div class="list-item__text">{{ user_mail }}</a></div>
       </div>
     {% endif %}
 
     {% if content.field_profile_address|render %}
-      <div class="list-item">
+      <div class="list-item list-item--withlabel">
           <div class="list-item__label">{% trans %}Address{% endtrans %}</div>
           <div class="list-item__text">
               {{ content.field_profile_address }}