From dc22c94b95c64d96a8baadb36f33e707677f021d Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 21 Apr 2023 21:10:51 +0200
Subject: [PATCH] Fix person banner contact details responsive placement

---
 .../Resources/public/chill/chillperson.scss   |  3 ++
 .../Resources/views/Person/banner.html.twig   | 32 +++++++++----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
index 7423919c4..59a9b05db 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss
@@ -19,6 +19,9 @@
  */
 
 @mixin context_buttons ($context) {
+    .chill-entity.entity-address .address {
+        padding-right: 1em;
+    }
     .address-details-button,
     .household-link {
         border: 1px solid white;
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
index b35c7f40a..2df130506 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
@@ -19,25 +19,25 @@
     <div id="header-person-details" class="header-details">
         <div class="container-xxl">
             <div class="row justify-content-between">
+                <div class="col-md-12 ps-md-5 ps-xxl-0 container">
+                    <div class="row contact">
 
-                <div class="col-md-12 ps-md-5 ps-xxl-0">
-                    <div class="contact">
                         {% if person.phonenumber %}
-                            <span class="phonenumber d-block d-sm-inline-block">
+                            <span class="col-auto phonenumber">
                                 <i class="fa fa-fw fa-phone"></i>
                                 <a href="{{ 'tel:' ~ person.phonenumber|phone_number_format('E164') }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
                                     {{ person.phonenumber|chill_format_phonenumber }}</a>
                             </span>
                         {% endif %}
                         {% if person.mobilenumber %}
-                            <span class="mobilenumber d-block d-sm-inline-block">
+                            <span class="col-auto mobilenumber">
                                 <i class="fa fa-fw fa-mobile"></i>
                                 <a href="{{ 'tel:' ~ person.mobilenumber|phone_number_format('E164') }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
                                     {{ person.mobilenumber|chill_format_phonenumber }}</a>
                             </span>
                         {% endif %}
                         {% if person.email %}
-                            <span class="email d-block d-sm-inline-block">
+                            <span class="col-auto email">
                                 <i class="fa fa-fw fa-envelope-o"></i>
                                 <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
                                     {{ person.email }}
@@ -51,24 +51,24 @@
                         {%- elseif person.lastAddress is not empty -%}
                             {% set address = person.lastAddress %}
                         {%- endif -%}
-                        {%- if address is not null -%}
-                            <span class=" d-block d-sm-inline-block">
+
+                        <span class="col-md-auto address">
+                            {%- if address is not null -%}
                                 {{ address|chill_entity_render_box({
                                     'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
                                 }) }}
-                            </span>
-                        {%- endif -%}
-                        {% if person.getCurrentHousehold is not null %}
-                            <span>
-                                <a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}"
-                                    class="btn household-link" title="{{ 'Show household'|trans }}">
+                            {%- endif -%}
+                            {% if person.getCurrentHousehold is not null %}
+                                <a class="btn household-link text-end"
+                                    href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id' : person.getCurrentHousehold.id } ) }}"
+                                    title="{{ 'Show household'|trans }}">
                                     <i class="fa fa-lg fa-home"></i>
                                 </a>
-                            </span>
-                        {% endif %}
+                            {% endif %}
+                        </span>
+
                     </div>
                 </div>
-
             </div>
         </div>
     </div>