fix template regressions with add_address component

Component works in modal or in main frame. CSS Flex position parent-children directives were broken.
Hope that fix don't introduce others display bug in any cases !

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -48,8 +48,9 @@
 
       </modal>
    </teleport>
-   <div class="mt-4" v-else>
-      <suggest-pane v-if="flag.suggestPane"
+   <template v-else>
+      <div v-if="flag.suggestPane" class="mt-4 flex-grow-1">
+         <suggest-pane
             v-bind:context="this.context"
             v-bind:options="this.options"
             v-bind:defaultz="this.defaultz"
@@ -75,6 +76,7 @@
    
          </suggest-pane>
       </div>
+   </template>
 
    <!-- step 2 -->
    <teleport to="body" v-if="inModal">
@@ -118,8 +120,9 @@
 
       </modal>
    </teleport>
-   <div class="mt-4" v-else>
-      <edit-pane v-if="flag.editPane"
+   <template v-else>
+      <div v-if="flag.editPane" class="mt-4 flex-grow-1">
+         <edit-pane
             v-bind:context="this.context"
             v-bind:options="this.options"
             v-bind:defaultz="this.defaultz"
@@ -152,6 +155,7 @@
    
          </edit-pane>
       </div>
+   </template>
 
    <!-- step 3 -->
    <teleport to="body" v-if="inModal">
@@ -192,8 +196,9 @@
 
       </modal>
    </teleport>
-   <div class="mt-4" v-else>
-      <date-pane v-if="flag.datePane"
+   <template v-else>
+      <div v-if="flag.datePane" class="mt-4 flex-grow-1">
+         <date-pane
             v-bind:context="this.context"
             v-bind:options="this.options"
             v-bind:defaultz="this.defaultz"
@@ -218,6 +223,7 @@
       
          </date-pane>
       </div>
+   </template>
 
 </template>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

@@ -187,6 +187,7 @@ div.address-form {
    div#address_map {
       height: 400px;
       width: 100%;
+      z-index: 1;
    }
 }
 </style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue

@@ -1,6 +1,6 @@
 <template>
 
-   <div v-if="!onlyButton">
+   <div v-if="!onlyButton" class="mt-4 flex-grow-1">
       <div class="loading">
          <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
          <span class="sr-only">{{ $t('loading') }}</span>
@@ -37,12 +37,7 @@
          </div>
       </div>
    
-      <div v-if="this.context.edit" class="mb-3 row">
-         <div class="col-sm-4"></div>
-         <div class="address-container col-sm-8">
       <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
-         </div>
-      </div>
    
       <div v-if="this.context.target.name === 'household' || this.context.edit">
          <action-buttons
@@ -50,7 +45,7 @@
             :defaultz="this.defaultz">
             <template v-slot:action>
                <button @click.prevent="$emit('openEditPane')"
-                  class="btn btn-sm" :class="getClassButton"
+                  class="btn" :class="getClassButton"
                   type="button" name="button" :title="$t(getTextButton)">
                   <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
                </button>
@@ -58,10 +53,6 @@
          </action-buttons>
       </div>
 
-      <div v-if="!this.context.edit">
-         <address-render-box :address="address" :isMultiline="false" :useDatePane="useDatePane"></address-render-box>
-      </div>
-
    </div>
 
    <div v-if="onlyButton">

src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig

@@ -5,7 +5,6 @@
 {% block content %}
     <h1>{{ block('title') }}</h1>
     
-    <div>
     {# include vue_address component #}
     {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
         targetEntity: { name: 'household', id: household.id },
@@ -15,6 +14,5 @@
         useValidFrom: true,
         useValidTo: true,
     } %}
-    </div>
 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -5,7 +5,6 @@
 {% block content %}
     <h1>{{ block('title') }}</h1>
     
-    <div>
     {# include vue_address component #}
     {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
         targetEntity: { name: 'household', id: household.id },
@@ -14,8 +13,5 @@
         stickyActions: true,
         useValidFrom: true,
     } %}
-        {#
-        #}
-    </div>
 
 {% endblock %}