bugfix: left-menu responsive + button responsive

client.sample.happy-dev.css

@@ -139,23 +139,23 @@
 }
 
 /* Button to delete a channel */
-#circle-profile>div>div.button-end>sib-ac-checker>sib-delete {
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete {
   background: var(--color-white);
   border: 1px solid var(--color-complementary);
   color: var(--color-complementary);
 }
 
-#circle-profile>div>div.button-end>sib-ac-checker>sib-delete>button {
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete>button {
   color: var(--color-complementary);
 }
 
-#circle-profile>div>div.button-end>sib-ac-checker>sib-delete:hover {
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover {
   background: var(--color-complementary);
   border: 1px solid var(--color-complementary);
   color: var(--color-white);
 }
 
-#circle-profile>div>div.button-end>sib-ac-checker>sib-delete:hover>button {
+#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover>button {
   color: var(--color-white);
 }
 

src/styles/base/main.scss

@@ -35,14 +35,6 @@ sib-dashboard section {
   }
 }
 
-/*@media (max-width: 767.98px) {
-  
-  #conversejs .converse-chatboxes .chatbox .box-flyout {
-    height: 100% !important;
-    height: 100vh !important;
-  }
-}*/
-
 .wrapper {
   display: grid;
   grid-template-areas: 
@@ -84,7 +76,7 @@ sib-dashboard section {
     display: block;
     bottom: 0;
     box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-    max-width: 86%;
+    width: 80vw;
     position: fixed;
     right: 0;
     top: 0;
@@ -380,7 +372,11 @@ h5 {
 
 .content-box__info {
   flex-direction: column;
+  padding: 1rem;
+
+  @include breakpoint(lg) {
     padding: 3.2rem;
+  }
 
   * {
     box-sizing: border-box;
@@ -471,8 +467,13 @@ h5 {
   display: flex;
 }
 
-.button-end {
+.desktop-button__end {
+  display: block;
+
+  @include breakpoint(lg) {
+    display: flex;
     justify-content: flex-end;
+  }
 }
 
 .space-between {
@@ -538,9 +539,34 @@ a,
       font-size: 1.4rem;
     }
 
-    &.btn-margin-left {
+    &.mobile-full-width {
+      margin-bottom: 1rem;
+      padding-left: 5rem;
+      width: -webkit-fill-available;
+      width: -moz-available;
+
+      @include breakpoint(lg) {
+        margin-bottom: 0;
+        padding-left: 2.5rem;
+        width: auto;
+      }
+
+      &::before {
+        margin-left: -2.6rem;
+
+        @include breakpoint(lg) {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &.desktop-btn-margin__left {
+      margin: 0;
+
+      @include breakpoint(lg) {
         margin-left: 2.2rem;
       }
+    }
 
     &.small {
 

src/styles/base/menu-left.scss

@@ -103,7 +103,7 @@
           .project-name {
             box-sizing: border-box;
             display: block;
-            width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */
+            width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
 
             @include breakpoint(lg) {
               width: 150px;
@@ -133,7 +133,7 @@
           >div[name='name'] {
             box-sizing: border-box;
             padding-left: 0.2em;
-            width: calc(80vw - 76px);  /*76px = padding of the element + width and margin of counter */
+            width: calc(80vw - 96px);  /*96px = padding of the element + width and margin of counter */
 
             @include breakpoint(lg) {
               overflow: hidden;
@@ -149,7 +149,7 @@
 
       .message-tab>div>sib-display>div>sib-display-div>div {
         box-sizing: border-box;
-        width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */
+        width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
         
         @include breakpoint(lg) {
           width: 150px;
@@ -158,8 +158,8 @@
 
       sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
         margin-left: 30px;
-        max-width: 82%;
+        margin-bottom: 10px;
-        width: 82%;
+        width: calc(80vw - 71px);
         display: block;
         background-color: var(--color-secondary);
         color: var(--color-grey-6);

src/styles/base/table.scss

@@ -145,7 +145,7 @@
       .reversed,
       .button-secondary,
       .bordered,
-      .btn-margin-left;
+      .desktop-btn-margin__left;
     }
   }
 }

src/styles/components/tags.scss

@@ -1,4 +1,7 @@
 %tag-admin {
+  display: none;
+
+  @include breakpoint(lg) {
     border: 1px solid var(--color-tag-admin-border);
     border-radius: 3px;
     color: var(--color-tag-admin-text);
@@ -6,4 +9,5 @@
     font-weight: 400;
     margin-left: 0.6rem;
     padding: 0.35rem 0.98rem;
+  }
 }

src/views/circle/page-circle-profile.pug

@@ -18,13 +18,13 @@ sib-router(default-route='circle-profile', hidden)
         widget-creationDate='sib-display-date'
       )
       sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
+        sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
 
 
-    div.flex.button-end
+    div.flex.desktop-button__end
       sib-ac-checker(permission='acl:Delete', bind-resources)
         sib-delete(
-          class='button text-bold text-uppercase button-primary bordered with-icon icon-trash'
+          class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
           bind-resources
           data-label='Supprimer le canal'
         )
@@ -32,14 +32,14 @@ sib-router(default-route='circle-profile', hidden)
       sib-widget(name='hubl-circle-leave-button')
         template
           sib-delete(
-            class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+            class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
             data-src="${src}"
             data-label='Quitter le canal'
           )
 
       sib-widget(name='hubl-circle-join-button')
         template
-          button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
+          button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
             sib-form(
               data-src=''
               nested-field='members'

src/views/project/page-project-profile.pug

@@ -21,7 +21,7 @@ sib-router(default-route='project-profile', hidden)
         widget-creationDate='sib-display-date'
       )
       sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
+        sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
 
     
     .flex.space-between.with-padding
@@ -54,13 +54,13 @@ sib-router(default-route='project-profile', hidden)
     sib-widget(name='hubl-project-leave-button')
       template
         sib-delete(
-          class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+          class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
           data-src="${src}"
           data-label='Quitter le groupe'
         )
 
     sib-display(
-      class='flex button-end'
+      class='flex desktop-button__end'
       bind-resources
       nested-field='members'
       fields='relation'