update: header - responsive ok

src/index.pug

@@ -17,7 +17,7 @@ html(lang="en")
 
     .wrapper
 
-      header#header.header(role='banner')
+      header#header.header.is-spaced(role='banner')
         include header.pug
 
       nav#main__menu.left-menu.jsLeftMenu

src/styles/base/header.scss

 #header {
-  max-height: 83px;
-  height: 83px;
+  max-height: 51px;
+  height: 51px;
   display: flex;
   align-items: center;
   background-color: var(--color-header-background);
@@ -10,11 +10,24 @@
   position: relative;
   z-index: 1;
 
+  @include breakpoint(lg) {
+    max-height: 83px;
+    height: 83px;
+  }
+
   &.is-spaced {
-    padding: 0 2.5rem;
+    padding: 0 0.8rem;
+
+    @include breakpoint(lg) {
+      padding: 0 2.5rem;
+    }
+  }
+
+  >*:not(:first-child) {
+    margin-left: 2rem;
 
-    @include breakpoint(sm) {
-      padding: 0 0.6rem;
+    @include breakpoint(lg) {
+      margin-left: 0;
     }
   }
 
@@ -22,15 +35,20 @@
     flex: 1 0 0;
     align-items: stretch;
   }
+
+  /* To remove the place taken by this element */
+  sib-widget[name='hubl-user-avatar'] {
+    display: contents;
+  }
 }
   
 /* General styling for both notification and user's panel */
 details {
-  margin-right: 2.5rem;
+  margin-right: 0;
   position: relative;
 
-  @include breakpoint(sm) {
-    margin-right: 0;
+  @include breakpoint(lg) {
+    margin-right: 2.5rem;
   }
 
   summary {
@@ -92,10 +110,13 @@ sib-notifications {
   user-select: none;
 
   summary {
-    padding: 18px;
     cursor: pointer;
     display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
 
+    @include breakpoint(lg) {
+      padding: 18px;
+    }
+    
     &:focus {
       background-color: var(--color-user-panel-header-background-open);
       color: var(--color-user-panel-header-text-open);