fix: avatar second contact, territory spacing - responsive

src/styles/custom-grid.scss

@@ -100,4 +100,77 @@
 /* custom paddings */
 .padding-right-60 {
     padding-right: 60px;
+}
+
+$medium: "max-width: 1200px";
+.segment {
+    @media($medium) {
+        &.md {
+            &-hidden {
+                display: none;
+            }
+
+            &-quarter {
+                width: 25%;
+            }
+
+            &-third {
+                width: 33.333%;
+            }
+
+            &-half {
+                width: 50%;
+            }
+
+            &-two-third {
+                width: 66.666%;
+            }
+
+            &-three-quarter {
+                width: 75%;
+            }
+
+            &-full {
+                width: 100%;
+            }
+
+            &-auto {
+                width: auto;
+            }
+        }
+
+        &.md-children {
+            &-hidden>div>solid-display {
+                display: none;
+            }
+
+            &-quarter>div>solid-display {
+                width: 25%;
+            }
+
+            &-third>div>solid-display {
+                width: 33.333%;
+            }
+
+            &-half>div>solid-display {
+                width: 50%;
+            }
+
+            &-two-third>div>solid-display {
+                width: 66.666%;
+            }
+
+            &-three-quarter>div>solid-display {
+                width: 75%;
+            }
+
+            &-full>div>solid-display {
+                width: 100%;
+            }
+
+            &-auto>div>solid-display {
+                width: auto;
+            }
+        }
+    }
 }
\ No newline at end of file

src/styles/territory-profile.scss

@@ -134,5 +134,12 @@
             }
         }
     }
+    .tzcld-territory-profile-ebe .segment.avatar-wrapper {
+        display: block;
+        .avatar.medium {
+            width: 100%;
+            height: 100%;
+        }
+    }
 
 }
\ No newline at end of file

src/views-terrytories.js

@@ -787,7 +787,7 @@ import("./utils.js").then((utils) => {
       
                 let render = `
                     
-                    <h2 class="margin-top-xxsmall margin-left-xsmall margin-bottom-medium sm-margin-none sm-margin-right-xsmall sm-margin-bottom-small sm-margin-left-xsmall text-xlarge text-bold text-color-heading text-uppercase">Auto-évaluation</h2>
+                    <h2 class="margin-top-xxsmall margin-left-xsmall margin-bottom-medium sm-margin-none sm-margin-right-xsmall sm-margin-bottom-small sm-margin-left-xsmall text-xlarge text-bold text-color-heading text-uppercase">Suivoit interne</h2>
       
                     <div class="segment full shadow bg-color-white margin-bottom-xlarge padding-xlarge sm-padding-none whitespace-normal">
                       <h2 class="margin-bottom-large margin-top-none margin-left-none text-xlarge text-xbold text-color-heading text-color-dark-blue">Synthèse</h2>
@@ -897,7 +897,7 @@ import("./utils.js").then((utils) => {
                   <div id="${utils.TZCLD_URLS.my_territory_space}" data-view="${utils.TZCLD_URLS.my_territory_space}" hidden>
                                   
                     <div class="with-sidebar whitespace-normal jsMobileContentSidebarControl">
-                      <div class="scrollbar-content views-container padding-top-xlarge sidebar-is-closed">
+                      <div class="scrollbar-content views-container padding-top-xlarge padding-right-small sidebar-is-closed">
                       
                         <div id="${utils.TZCLD_URLS.my_territory_infos}" data-view="${utils.TZCLD_URLS.my_territory_infos}" class="community-my-community community-profile" hidden>
                         ${this.viewMyCommunity()}

src/widjets-display-territory-tzcld.js

@@ -286,9 +286,9 @@ import("./utils.js").then((utils) => {
       </div>` ;//tzcld-territory-profile-wrapper
 
         
-        render += `<div id="tzcld-territory-profile-wrapper2" class="tzcld-territory-profile-wrapper2 segment full margin-top-large">`; 
+        render += `<div id="tzcld-territory-profile-wrapper2" class="tzcld-territory-profile-wrapper2 segment full margin-top-large whitespace-normal">`; 
 
-        render += `<div class="tzcld-territory-profile-primary-contact segment width-30 padding-right-large">
+        render += `<div class="tzcld-territory-profile-primary-contact segment third padding-right-large sm-full">
 
         
         ` ;
@@ -345,7 +345,7 @@ import("./utils.js").then((utils) => {
           </div>`; 
         }
         render += `</div>`; 
-        render += `<div class="tzcld-territory-profile-ebe segment width-70">
+        render += `<div class="tzcld-territory-profile-ebe segment two-third sm-full">
         <h2 class="tzcld-h2">Informations de contact</h2>
         <div class="col-2-wrapper segment full shadow  bg-color-white">`; 
 
@@ -384,9 +384,9 @@ import("./utils.js").then((utils) => {
         nested-field="members" 
         fields="segment1(segment2(member-picture(user.account.picture)), segment3(user.name, segment5(user.tzcld_profile.jobs)), user)"
         class-segment1="segment bg-color-white shadow full text-top whitespace-normal" 
-        class-segment2="segment quarter padding-medium text-center whitespace-normal" 
-        class-segment3="segment three-quarter padding-top-xxsmall padding-right-small padding-bottom-small whitespace-normal" 
-        class-segment5="segment full padding-none padding-top-xsmall  text-left whitespace-normal" 
+        class-segment2="segment quarter md-full padding-medium text-center whitespace-normal" 
+        class-segment3="segment three-quarter md-full padding-top-xxsmall padding-left-small padding-right-small padding-bottom-small whitespace-normal" 
+        class-segment5="segment full padding-none padding-top-xsmall text-left whitespace-normal" 
         class-member-picture="segment avatar-wrapper" 
         class-user.account.picture="avatar medium" 
         class-user.name="block margin-top-xsmall margin-bottom-xxsmall text-xlarge text-bold text-color-heading whitespace-normal"