From 52054f376603caea1b6e96bbda76b5d7d55e8d0f Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 22 Jan 2021 14:29:45 +0100
Subject: [PATCH] feature: .lg- removed + fixes on small screens

---
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 src/dependencies.pug                          |  12 +-
 src/index.pug                                 |   6 +-
 src/styles/index.scss                         | 132 ++++++------------
 src/views/page-about.pug                      |   6 +-
 src/views/page-admin.pug                      |  14 +-
 src/views/page-circle.pug                     |  22 +--
 src/views/page-messages.pug                   |   4 +-
 src/views/page-project.pug                    |  10 +-
 .../admin/page-admin-circles-create.pug       |  20 +--
 .../partials/admin/page-admin-circles.pug     |  38 ++---
 .../partials/admin/page-admin-communities.pug |  14 +-
 .../admin/page-admin-projects-create.pug      |  20 +--
 .../partials/admin/page-admin-projects.pug    |  44 +++---
 .../admin/page-admin-users-create.pug         |  16 +--
 .../partials/circle/page-circle-chat.pug      |   4 +-
 .../partials/circle/page-circle-edit.pug      |  40 +++---
 .../partials/circle/page-circle-profile.pug   |  16 +--
 src/views/partials/menu-left.pug              |  52 +++----
 .../partials/project/page-project-chat.pug    |   4 +-
 .../partials/project/page-project-edit.pug    |  44 +++---
 .../partials/project/page-project-profile.pug |  24 ++--
 src/views/partials/widgets/hubl-captain.pug   |  10 +-
 24 files changed, 260 insertions(+), 300 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 225a375..bcdde73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1159,9 +1159,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.4.4.tgz",
-      "integrity": "sha512-X52jdEgG283HMtXAyKeM3R0YLVwJuKSsR4ZU+h7CUmLrtZ+iPtHDgIu3Z9f17NmrF94zisy7FZaZvG/CWm1trg=="
+      "version": "1.4.9",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.4.9.tgz",
+      "integrity": "sha512-VrsoOXOe/Eb5Yjz4+VtIYeF68Bbk0ZCG+dzXGvdrKMhztoy2RlaHNplplAxgtHUyDhHw1S5kVQ8AmwHLWywOvQ=="
     },
     "@types/q": {
       "version": "1.5.4",
diff --git a/package.json b/package.json
index 7b603c6..e631f6f 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.4.4",
+    "@startinblox/hubl-styling-framework": "^1.4.9",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",
     "parcel-bundler": "^1.12.4",
diff --git a/src/dependencies.pug b/src/dependencies.pug
index ed6c651..aa2cedc 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -24,16 +24,16 @@ if endpoints.get
     //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
 
   if endpoints.get.joboffers
-    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.3" defer)
-    script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@beta" defer)
+    //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
   if endpoints.get.uploads && endpoints.get.skills && endpoints.get.users
-    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.4" defer)
-    script(type="module" src="/lib/solid-directory/dist/index.js" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@beta" defer)
+    //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
   if endpoints.get.dashboards
-    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.7" defer)
-    script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@beta" defer)
+    //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
   if endpoints.get.users
     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.7" defer)
diff --git a/src/index.pug b/src/index.pug
index ed2d4dd..76645d5 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -44,13 +44,13 @@ html(lang="en")
       //- include views/partials/notifications.pug
       include views/partials/widgets.pug
 
-      header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection
+      header#header.segment.full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection
         include views/partials/header.pug
 
-      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
+      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.jsLeftMenu
         include views/partials/menu-left.pug
 
-      main#content.segment.lg-three-quarter.sm-full.text-top.notLoggedIn
+      main#content.segment.three-quarter.sm-full.text-top.notLoggedIn
 
         if endpoints.get.dashboards
           #dashboard(hidden, data-view="dashboard").scrollbar-content
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c00a87a..4758ab4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -6,107 +6,67 @@ solid-display>div {
   display: contents !important;
 }
 
-.whitespace-normal {
-  white-space: normal;
-}
-
-.block {
-  display: block;
-}
-
-.line-xlarge {
-  line-height: 22px;
-}
-
-.sm-whitespace-normal {
-  @media (max-width: 768px) {
-    white-space: normal;
+/*.segment {
+  &.quarter {
+    width: 25%;
   }
-}
 
-.sm-text-center {
-  @media (max-width: 768px) {
-    text-align: center;
+  &.third {
+    width: 33.333%;
+  }
+
+  &.half {
+    width: 50%;
+  }
+
+  &.two-third {
+    width: 66.666%;
+  }
+
+  &.three-quarter {
+    width: 75%;
+  }
+
+  &.full {
+    width: 100%;
+  }
+
+  &.auto {
+    width: auto;
   }
-}
 
 
+  &.children {
 
-$small: "max-width: 768px";
-
-.segment {
-  @media($small) {
-    &.sm {
-      &-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;
-      }
+    &-quarter>div>solid-display {
+      width: 25%;
     }
 
-    &.sm-children {
-      &-hidden>div>solid-display {
-        display: none;
-      }
+    &-third>div>solid-display {
+      width: 33.333%;
+    }
 
-      &-quarter>div>solid-display {
-        width: 25%;
-      }
+    &-half>div>solid-display {
+      width: 50%;
+    }
 
-      &-third>div>solid-display {
-        width: 33.333%;
-      }
+    &-two-third>div>solid-display {
+      width: 66.666%;
+    }
 
-      &-half>div>solid-display {
-        width: 50%;
-      }
+    &-three-quarter>div>solid-display {
+      width: 75%;
+    }
 
-      &-two-third>div>solid-display {
-        width: 66.666%;
-      }
+    &-full>div>solid-display {
+      width: 100%;
+    }
 
-      &-three-quarter>div>solid-display {
-        width: 75%;
-      }
-
-      &-full>div>solid-display {
-        width: 100%;
-      }
-
-      &-auto>div>solid-display {
-        width: auto;
-      }
+    &-auto>div>solid-display {
+      width: auto;
     }
   }
-}
-
-
+}*/
 
 @import 'header/_index';
 @import 'left-nav/_index';
diff --git a/src/views/page-about.pug b/src/views/page-about.pug
index 441afc2..f9a4fe0 100644
--- a/src/views/page-about.pug
+++ b/src/views/page-about.pug
@@ -1,7 +1,7 @@
-div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-top-xxsmall.sm-padding-left-xsmall.sm-padding-right-xsmall.sm-padding-bottom-medium.whitespace-normal
+div.segment.block.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-top-xxsmall.sm-padding-left-xsmall.sm-padding-right-xsmall.sm-padding-bottom-medium.whitespace-normal
   h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title')
 
-  div.segment.lg-two-third.sm-full.margin-top-small.sm-margin-top-xxsmall.padding-right-xlarge.sm-padding-none
+  div.segment.two-third.sm-full.margin-top-small.sm-margin-top-xxsmall.padding-right-xlarge.sm-padding-none
     div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.sm-padding-medium.sm-padding-top-xxsmall.sm-padding-bottom-xlarge.text-center
       h3.text-color-heading.text-semibold.text-uppercase.line-xlarge(data-trans='about.card1.subTitle')
       div
@@ -9,7 +9,7 @@ div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-l
         p.segment.whitespace-normal.text-large.line-xlarge(data-trans='about.card1.paragraph2')
         a.link.text-xlarge(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/
 
-  div.segment.lg-third.sm-full.margin-top-small.text-top
+  div.segment.third.sm-full.margin-top-small.text-top
     div.segment.sm-full.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.sm-padding-medium.sm-padding-bottom-xlarge.text-center
       div.segment.margin-top-small
         div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index 6deea1e..5813229 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -11,21 +11,21 @@
 nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='admin-circles')
     ul
-      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
+      li.segment.full.padding-small.text-right.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
         a(data-trans='admin.menuRight.fold')
       if (endpoints.users || (endpoints.get && endpoints.get.users))
-        solid-route.segment.lg-full.sm-full(name='admin-communities')
-          li.segment.lg-full.sm-full.padding-medium
+        solid-route.segment.full(name='admin-communities')
+          li.segment.full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.community')
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
-        solid-route.segment.lg-full.sm-full(name='admin-circles')
-          li.segment.lg-full.sm-full.padding-medium
+        solid-route.segment.full(name='admin-circles')
+          li.segment.full.padding-medium
             span.icon.ci-bubble-add.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.circles')
       if endpoints.projects || (endpoints.get && endpoints.get.projects)
-        solid-route.segment.lg-full.sm-full(name='admin-projects')
-          li.segment.lg-full.sm-full.padding-medium
+        solid-route.segment.full(name='admin-projects')
+          li.segment.full.padding-medium
             span.icon.ci-add.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.projects')
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index 28bbf58..56bd767 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -14,29 +14,29 @@
 nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='circle-chat')
     ul
-      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
+      li.segment.full.padding-small.text-right.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
         a(data-trans='circle.menuRight.fold')
-      solid-route.segment.lg-full.sm-full(name='circle-chat')
-        li.segment.lg-full.sm-full.padding-medium
+      solid-route.segment.full(name='circle-chat')
+        li.segment.full.padding-medium
           span.icon.ci-chat.icon-xlarge.margin-right-medium
           a(data-trans='circle.menuRight.chat')
-      solid-route.segment.lg-full.sm-full(name='circle-information')
-        li.segment.lg-full.sm-full.padding-medium
+      solid-route.segment.full(name='circle-information')
+        li.segment.full.padding-medium
           span.icon.ci-information.icon-xlarge.margin-right-medium
           a(data-trans='circle.menuRight.information')
       if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
-        solid-route.segment.lg-full.sm-full(name='circle-resources' use-id)
-          li.segment.lg-full.sm-full.padding-medium
+        solid-route.segment.full(name='circle-resources' use-id)
+          li.segment.full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='circle.menuRight.resources')
       if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents))
-        solid-route.segment.lg-full.sm-full(name='circle-events' use-id)
-          li.segment.lg-full.sm-full.padding-medium
+        solid-route.segment.full(name='circle-events' use-id)
+          li.segment.full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='circle.menuRight.events')
       if endpoints.polls || (endpoints.get && endpoints.get.polls)
-        solid-route.segment.lg-full.sm-full(name='circle-polls' use-id)
-          li.segment.lg-full.sm-full.padding-medium
+        solid-route.segment.full(name='circle-polls' use-id)
+          li.segment.full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='circle.menuRight.polls')    
diff --git a/src/views/page-messages.pug b/src/views/page-messages.pug
index df00215..f2b7e8b 100644
--- a/src/views/page-messages.pug
+++ b/src/views/page-messages.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.sm-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal
+div.segment.full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal
   solid-display.labelled-avatar.small(
     bind-resources
     fields='segment1(account.picture), segment2(name, hyphen, at, username)'
@@ -17,7 +17,7 @@ div.segment.lg-full.sm-full.padding-top-small.padding-right-large.padding-bottom
     widget-account.picture='hubl-user-avatar'
   )
 
-.chat-view.segment.lg-full.sm-full.whitespace-normal
+.chat-view.segment.full.whitespace-normal
   solid-xmpp-chat(
     data-authentication='login',
     data-auto-login='true',
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index ea3678d..a335237 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -10,15 +10,15 @@
 nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat')
     ul
-      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
+      li.segment.full.padding-small.text-right.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
         a(data-trans='project.menuRight.fold')
-      solid-route.segment.lg-full.sm-full(name='project-chat')
-        li.segment.lg-full.sm-full.padding-medium
+      solid-route.segment.full(name='project-chat')
+        li.segment.full.padding-medium
           span.icon.ci-chat.icon-xlarge.margin-right-medium
           a(data-trans='project.menuRight.chat')
-      solid-route.segment.lg-full.sm-full(name='project-information')
-        li.segment.lg-full.sm-full.padding-medium
+      solid-route.segment.full(name='project-information')
+        li.segment.full.padding-medium
           span.icon.ci-information.icon-xlarge.margin-right-medium
           a(data-trans='project.menuRight.information')
       solid-route(name='project-picture' use-id)
diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug
index 8e55513..a7f37e6 100644
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
@@ -1,10 +1,10 @@
-div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
-  div.segment.lg-half  
+div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
+  div.segment.half.sm-full  
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
-  div.segment.lg-half.sm-hidden.text-right
+  div.segment.half.sm-hidden.text-right
     solid-link(class="backlink", bind-resources, next='admin-circle-list' data-trans='circle.create.backlink')
 
-div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-circles-create.loader.loader-top
     div
     div
@@ -20,12 +20,12 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
     required-subtitle
     loader-id='loader-circles-create'
 
-    class-status='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-    class-linebreak='segment lg-half sm-hidden'
-    class-name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-    class-subtitle='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-    class-description='segment margin-bottom-xxsmall lg-full sm-full text-small text-semibold text-uppercase text-color-heading'
-    class-help='segment lg-full sm-full text-small margin-bottom-medium padding-left-small'
+    class-status='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+    class-linebreak='segment half sm-hidden'
+    class-name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-subtitle='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-description='segment margin-bottom-xxsmall full text-small text-semibold text-uppercase text-color-heading'
+    class-help='segment full text-small margin-bottom-medium padding-left-small'
 
 
     label-status=''
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index 3d1a476..62b536e 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -17,20 +17,20 @@ solid-router(default-route='admin-circle-list', hidden)
         class-segment1='segment'
         class-account.picture='avatar'
 
-        class-segment2='segment lg-three-quarter margin-left-xsmall'
-        class-line1='block'
+        class-segment2='segment three-quarter margin-left-xsmall'
+        class-line1='segment block'
         class-name='text-small text-semibold text-color-heading text-sub'
-        class-line2='block text-xsmall'
+        class-line2='segment block text-xsmall'
 
         widget-account.picture='hubl-user-avatar'
 
         value-at='@'
       )
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal
+  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal
 
     div#loader-admin-circles.loader.loader-top
       div
@@ -38,10 +38,10 @@ solid-router(default-route='admin-circle-list', hidden)
       div
       div
 
-    div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
-      div.segment.lg-half.sm-full
+    div.segment.full.margin-bottom-xlarge.whitespace-normal
+      div.segment.half.sm-full
         h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
-      div.segment.lg-half.sm-full.text-right
+      div.segment.half.sm-full.text-right
         solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
           solid-link(
             class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
@@ -53,9 +53,9 @@ solid-router(default-route='admin-circle-list', hidden)
       .table
 
         div.table-header.bg-color-third.text-color-heading
-          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader1')
-          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader2')
-          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader3')
+          div.segment.table-cell.third(data-trans='circle.list.tableHeader1')
+          div.segment.table-cell.third(data-trans='circle.list.tableHeader2')
+          div.segment.table-cell.third(data-trans='circle.list.tableHeader3')
 
         solid-widget(name='hubl-admin-circle-leave-button')
           template
@@ -79,12 +79,12 @@ solid-router(default-route='admin-circle-list', hidden)
           fields='cell1(circle.name, circle.subtitle), cell2(circle.owner), cell3(leaveButton)'
           loader-id='loader-admin-circles'
 
-          class-cell1='segment table-cell lg-third whitespace-normal'
-          class-cell2='segment table-cell lg-third text-center text-left'
-          class-cell3='segment table-cell lg-third text-center'
+          class-cell1='segment table-cell third whitespace-normal'
+          class-cell2='segment table-cell third text-center text-left'
+          class-cell3='segment table-cell third text-center'
 
           class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-          class-circle.subtitle='segment lg-full sm-full'
+          class-circle.subtitle='segment full'
 
           action-leaveButton="joinButton"
           widget-leaveButton="hubl-admin-circle-leave-button"
@@ -120,12 +120,12 @@ solid-router(default-route='admin-circle-list', hidden)
           fields='cell1(name, subtitle), cell2(owner), cell3(members)'
           loader-id='loader-admin-circles'
 
-          class-cell1='segment table-cell lg-third whitespace-normal'
-          class-cell2='segment table-cell lg-third text-center text-left'
-          class-cell3='segment table-cell lg-third text-center'
+          class-cell1='segment table-cell third whitespace-normal'
+          class-cell2='segment table-cell third text-center text-left'
+          class-cell3='segment table-cell third text-center'
 
           class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-          class-subtitle='segment lg-full sm-full'
+          class-subtitle='segment full'
 
           widget-owner='hubl-circle-owner'
           widget-members="hubl-admin-circle-join-button"
diff --git a/src/views/partials/admin/page-admin-communities.pug b/src/views/partials/admin/page-admin-communities.pug
index 7bc3f56..de932fc 100644
--- a/src/views/partials/admin/page-admin-communities.pug
+++ b/src/views/partials/admin/page-admin-communities.pug
@@ -15,19 +15,19 @@ solid-widget(name='hubl-action-community')
       div.button.button-disabled(data-trans='communities.noPermission')
 
 #admin-communities-list(hidden, data-view="admin-communities-list")
-  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 
-    div.segment.lg-full.margin-bottom-xlarge
+    div.segment.full.margin-bottom-xlarge
       h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='communities.subTitle')
 
     .segment.table-wrapper
       .table
         div.table-header.bg-color-third.text-color-heading
-          div.segment.table-cell.table-cell.lg-half(data-trans='communities.tableHeader1') 
-          div.segment.table-cell.table-cell.lg-half(data-trans='communities.tableHeader2')
+          div.segment.table-cell.table-cell.half(data-trans='communities.tableHeader1') 
+          div.segment.table-cell.table-cell.half(data-trans='communities.tableHeader2')
       
         solid-display(
           class='table-body'
@@ -36,8 +36,8 @@ solid-widget(name='hubl-action-community')
           fields='cell1(community.name), cell2(community)'
           loader-id='loader-admin-community'
 
-          class-cell1='segment table-cell lg-half text-center'
-          class-cell2='segment table-cell lg-half text-center'
+          class-cell1='segment table-cell half text-center'
+          class-cell2='segment table-cell half text-center'
 
           class-community.name='text-xlarge text-color-heading text-semibold text-letter-spacing-large ellipsis'
           widget-community='hubl-action-community'
diff --git a/src/views/partials/admin/page-admin-projects-create.pug b/src/views/partials/admin/page-admin-projects-create.pug
index f18216d..3cf9978 100644
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
@@ -1,10 +1,10 @@
-div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
-  div.segment.lg-half
+div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
+  div.segment.half.sm-full
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.create.title')
-  div.segment.lg-half.sm-hidden.text-right
+  div.segment.half.sm-hidden.text-right
     solid-link(class="backlink right", next='admin-project-list' data-trans='project.create.backlink')
 
-div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-projects-create.loader.loader-top
     div
     div
@@ -30,12 +30,12 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
     label-help=''
     label-captain=''
     
-    class-customer.name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-    class-name='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-    class-description='segment margin-bottom-xxsmall lg-full sm-full text-small text-semibold text-uppercase text-color-heading'
-    class-help='segment lg-full sm-full text-small margin-bottom-medium padding-left-small'
-    class-captain='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-    class-linebreak='segment lg-full sm-hidden'
+    class-customer.name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-name='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-description='segment margin-bottom-xxsmall full text-small text-semibold text-uppercase text-color-heading'
+    class-help='segment full text-small margin-bottom-medium padding-left-small'
+    class-captain='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+    class-linebreak='segment full sm-hidden'
     
     widget-status='solid-form-hidden'
     value-status='Private'
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index 694b7cb..59e7d23 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@@ -8,15 +8,15 @@ solid-router(default-route='admin-project-list', hidden)
 
 #admin-project-list(hidden, data-view="admin-project-list")
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 
-    div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
-      div.segment.lg-half.sm-full
+    div.segment.full.margin-bottom-xlarge.whitespace-normal
+      div.segment.half.sm-full
         h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
-      div.segment.lg-half.sm-full.text-right
+      div.segment.half.sm-full.text-right
         solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
           solid-link(
             class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
@@ -28,10 +28,10 @@ solid-router(default-route='admin-project-list', hidden)
       .table
 
         div.table-header.bg-color-third.text-color-heading
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader1')
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader2')
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader3')
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader4')
+          div.segment.table-cell.quarter(data-trans='project.list.tableHeader1')
+          div.segment.table-cell.quarter(data-trans='project.list.tableHeader2')
+          div.segment.table-cell.quarter(data-trans='project.list.tableHeader3')
+          div.segment.table-cell.quarter(data-trans='project.list.tableHeader4')
 
         solid-widget(name="hubl-admin-project-leave-button")
           template
@@ -57,10 +57,10 @@ solid-router(default-route='admin-project-list', hidden)
               class-segment1='segment'
               class-account.picture='avatar'
 
-              class-segment2='segment lg-three-quarter margin-left-xsmall'
-              class-line1='block'
+              class-segment2='segment three-quarter margin-left-xsmall'
+              class-line1='segment block'
               class-name='text-small text-semibold text-color-heading text-sub'
-              class-line2='block text-xsmall'
+              class-line2='segment block text-xsmall'
 
               widget-account.picture='hubl-user-avatar'
 
@@ -95,13 +95,13 @@ solid-router(default-route='admin-project-list', hidden)
           fields='cell1(project.customer.name, project.name), cell2(project.members), cell3(project.captain), cell4(leaveButton)'
           loader-id='loader-admin-projects'
 
-          class-cell1='segment table-cell lg-quarter text-left whitespace-normal'
-          class-cell2='segment table-cell lg-quarter text-left'
-          class-cell3='segment table-cell lg-quarter text-left'
-          class-cell4='segment table-cell lg-quarter text-center'
+          class-cell1='segment table-cell quarter text-left whitespace-normal'
+          class-cell2='segment table-cell quarter text-left'
+          class-cell3='segment table-cell quarter text-left'
+          class-cell4='segment table-cell quarter text-center'
 
           class-project.customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-          class-project.name='segment lg-full sm-full'
+          class-project.name='segment full'
 
           action-leaveButton="joinButton"
           widget-leaveButton="hubl-admin-project-leave-button"
@@ -140,13 +140,13 @@ solid-router(default-route='admin-project-list', hidden)
           fields='cell1(customer.name, name), cell2(members), cell3(captain), cell4(joinButton)'
           loader-id='loader-admin-projects'
 
-          class-cell1='segment table-cell lg-quarter text-left whitespace-normal'
-          class-cell2='segment table-cell lg-quarter text-left'
-          class-cell3='segment table-cell lg-quarter text-left'
-          class-cell4='segment table-cell lg-quarter text-center'
+          class-cell1='segment table-cell quarter text-left whitespace-normal'
+          class-cell2='segment table-cell quarter text-left'
+          class-cell3='segment table-cell quarter text-left'
+          class-cell4='segment table-cell quarter text-center'
 
           class-customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellpsis'
-          class-name='segment lg-full sm-full'
+          class-name='segment full'
 
           action-joinButton="joinButton" # Workaround: I need members two times
           widget-joinButton="hubl-admin-project-join-button"
diff --git a/src/views/partials/admin/page-admin-users-create.pug b/src/views/partials/admin/page-admin-users-create.pug
index eede28c..adb7a9f 100644
--- a/src/views/partials/admin/page-admin-users-create.pug
+++ b/src/views/partials/admin/page-admin-users-create.pug
@@ -1,11 +1,11 @@
-div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.padding-large.border-bottom.border-color-grey
-  div.segment.lg-half
+div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.padding-large.border-bottom.border-color-grey
+  div.segment.half.sm-full
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
-  div.segment.lg-half.sm-hidden.text-right
+  div.segment.half.sm-hidden.text-right
     solid-link(class="backlink", bind-resources, next='admin-communities-list' data-trans='circle.create.backlink')
 
 
-div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-users-title.loader.loader
     div
     div
@@ -25,7 +25,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
 
   solid-widget(name='hubl-email-field')
     template
-      div.segment.margin-bottom-medium.lg-half.sm-full.padding-left-small.sm-padding-none.text-small.text-semibold.text-uppercase.text-color-heading
+      div.segment.margin-bottom-medium.half.sm-full.padding-left-small.sm-padding-none.text-small.text-semibold.text-uppercase.text-color-heading
         label(data-trans='user.create.labelEmail')
         input(type="email" label='' data-trans='label=user.create.labelEmail' name="email" required value="\${value}" data-holder)
 
@@ -44,9 +44,9 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
     required-user.email
     loader-id='loader-users-create'
 
-    class-user.first_name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-    class-user.last_name='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-    class-user.username='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-user.first_name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-user.last_name='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-user.username='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
 
     label-user.first_name=''
     label-user.last_name=''
diff --git a/src/views/partials/circle/page-circle-chat.pug b/src/views/partials/circle/page-circle-chat.pug
index 4d2cefc..f902b3a 100644
--- a/src/views/partials/circle/page-circle-chat.pug
+++ b/src/views/partials/circle/page-circle-chat.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
   solid-display.text-xxlarge.text-letter-spacing-large(
     bind-resources
     fields='name, dash, subtitle'
@@ -9,7 +9,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-
     class-dash='text-color-heading text-bold'          
   )
 
-.chat-view.segment.lg-full.sm-full.whitespace-normal
+.chat-view.segment.full.whitespace-normal
   solid-xmpp-chat(
     data-authentication='login',
     data-auto-login='true',
diff --git a/src/views/partials/circle/page-circle-edit.pug b/src/views/partials/circle/page-circle-edit.pug
index f8c63b8..019b580 100644
--- a/src/views/partials/circle/page-circle-edit.pug
+++ b/src/views/partials/circle/page-circle-edit.pug
@@ -1,6 +1,6 @@
 solid-ac-checker(permission='acl:Read', bind-resources)
-  div.segment.lg-full.sm-full.padding-large.border-bottom.border-color-grey
-    div.segment.lg-half
+  div.segment.full.padding-large.border-bottom.border-color-grey
+    div.segment.half.sm-full
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='name, dash, subtitle'
@@ -10,10 +10,10 @@ solid-ac-checker(permission='acl:Read', bind-resources)
         class-name='text-color-heading text-bold'
         class-dash='text-color-heading text-bold'          
       )
-    div.segment.lg-half.sm-hidden.text-right
+    div.segment.half.sm-hidden.text-right
       solid-link(class="backlink", bind-resources, next='circle-profile' data-trans='circle.edit.backlink')
 
-div.segment.lg-full.sm-full.padding-large.whitespace-normal
+div.segment.full.padding-large.whitespace-normal
 
   solid-widget(name="circle-edit-members-delete")
     template
@@ -52,12 +52,12 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
       label-status=''
       label-help=''
 
-      class-name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-      class-subtitle='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-      class-description='segment margin-bottom-medium lg-full sm-full sm-full text-small text-semibold text-uppercase text-color-heading'
-      class-status='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-      class-owner='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-      class-help='segment lg-full sm-full text-small margin-bottom-medium padding-left-small'
+      class-name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+      class-subtitle='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+      class-description='segment margin-bottom-medium full text-small text-semibold text-uppercase text-color-heading'
+      class-status='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+      class-owner='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+      class-help='segment full text-small margin-bottom-medium padding-left-small'
 
       widget-status='hubl-status'
       widget-description='solid-form-richtext-label'
@@ -72,7 +72,7 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
       data-trans='label-status=circle.edit.labelStatus;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit;label-subtitle=circle.edit.labelSubtitle;label-help=circle.edit.descriptionHelp'
     )
 
-  h3.segment.lg-full.sm-full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle')
+  h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle')
 
   solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
     solid-form.block.segment.margin-bottom-xlarge.form(
@@ -91,8 +91,8 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
   .segment.table-wrapper
     .table
       div.table-header.bg-color-third.text-color-heading
-        div.segment.table-cell.lg-half(data-trans='circle.edit.tableHeader1')
-        div.segment.table-cell.lg-half(data-trans='circle.edit.tableHeader2')
+        div.segment.table-cell.half(data-trans='circle.edit.tableHeader1')
+        div.segment.table-cell.half(data-trans='circle.edit.tableHeader2')
 
       solid-display(
         class='table-body'
@@ -101,19 +101,19 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
         fields='cell(segment1(user.account.picture), segment2(line1(user.name, is_admin), line2(atom, user.communities))), self'
         loader-id='loader-circle-edit'
 
-        class-cell='segment table-cell lg-half labelled-avatar two-lines text-left'
-        class-self='segment table-cell lg-half text-center'
+        class-cell='segment table-cell half labelled-avatar two-lines text-left'
+        class-self='segment table-cell half text-center'
 
         class-segment1='segment'
         class-user.account.picture='avatar'
 
-        class-segment2='segment lg-three-quarter margin-left-xsmall'
+        class-segment2='segment three-quarter margin-left-xsmall'
         class-line1='block'
-        class-user.name='text-small text-semibold text-color-heading text-sub'
-        class-is_admin='segment margin-left-medium tag color-primary'
+        class-user.name='text-small text-semibold text-color-heading text-sub margin-right-medium'
+        class-is_admin='segment tag color-primary'
         class-line2='block'
         class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
-        class-user.communities='lg-full'
+        class-user.communities='full'
 
         multiple-user.communities
         multiple-user.communities-fields="community.name"
@@ -126,4 +126,4 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
       )
 
       //- Only to show the table grid
-      div.segment.table-cell.lg-half
+      div.segment.table-cell.half
diff --git a/src/views/partials/circle/page-circle-profile.pug b/src/views/partials/circle/page-circle-profile.pug
index 11a0d05..2ab9c3a 100644
--- a/src/views/partials/circle/page-circle-profile.pug
+++ b/src/views/partials/circle/page-circle-profile.pug
@@ -4,7 +4,7 @@ solid-router(default-route='circle-profile', hidden)
 
 #circle-profile(hidden, data-view="circle-profile")
   solid-ac-checker.block(permission='acl:Read', bind-resources)
-    div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+    div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='name, dash, subtitle'
@@ -19,7 +19,7 @@ solid-router(default-route='circle-profile', hidden)
     template 
       solid-link.icon.icon-secondary.hover.icon-speech.margin-left-xsmall.margin-right-medium(data-src='\${value}', next='messages')
   
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
+  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
     div#loader-circle-profile.loader
       div
       div
@@ -27,7 +27,7 @@ solid-router(default-route='circle-profile', hidden)
       div
 
     div.whitespace-normal
-      solid-display.segment.lg-half.sm-full.sm-margin-bottom-medium(
+      solid-display.segment.half.sm-full.sm-margin-bottom-medium(
         bind-resources
         fields='creationDateSet(title, creationDate)'
         loader-id='loader-circle-profile'
@@ -38,13 +38,13 @@ solid-router(default-route='circle-profile', hidden)
         widget-creationDate='solid-display-value-date'
       )
 
-      solid-ac-checker.segment.lg-half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
+      solid-ac-checker.segment.half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
         solid-ac-checker(permission='acl:Delete', bind-resources)
           solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
         solid-ac-checker(no-permission='acl:Delete', bind-resources)
           solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')
 
-      solid-ac-checker.segment.lg-full.sm-full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
+      solid-ac-checker.segment.full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
         solid-delete(
           class='segment sm-full button text-xsmall text-bold text-uppercase text-uppercase text-center color-secondary bordered'
           bind-resources
@@ -106,7 +106,7 @@ solid-router(default-route='circle-profile', hidden)
     solid-widget(name='hubl-circle-user-admin')
       template ${value ? "Administrateur" : ""}
 
-    solid-display.segment.lg-full.sm-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.sm-children-full.children-margin-bottom-medium(
+    solid-display.segment.full.labelled-avatar.two-lines.whitespace-normal.children.children-full.sm-children-full.children-margin-bottom-medium(
       bind-resources
       nested-field='members'
       loader-id='loader-circle-profile'
@@ -115,12 +115,12 @@ solid-router(default-route='circle-profile', hidden)
       class-segment1='segment'
       class-user.account.picture='avatar'
 
-      class-segment2='segment lg-three-quarter margin-left-xsmall'
+      class-segment2='segment three-quarter margin-left-xsmall'
       class-line1='block'
       class-user.name='text-small text-semibold text-color-heading text-sub'
       class-line2='block'
       class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
-      class-user.communities='lg-full'
+      class-user.communities='full'
       
       class-is_admin='segment tag color-primary'
 
diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug
index a4b77b8..30196b4 100644
--- a/src/views/partials/menu-left.pug
+++ b/src/views/partials/menu-left.pug
@@ -31,17 +31,17 @@ solid-widget(name='hubl-create')
       br
       span(data-trans="menuLeft.emptyCircleProject.createNew")
       span &nbsp;
-      solid-link.segment.lg-full.sm-full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
+      solid-link.segment.full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
 
 solid-widget(name='hubl-menu-fix-url-contact')
   template
-    solid-link.segment.lg-full.sm-full(data-src="${value}" next="messages")
-      solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
+    solid-link.segment.full(data-src="${value}" next="messages")
+      solid-display.segment.full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
         fields='segment(message(name, chatProfile.jabberID), badge)'
         
-        class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
-        class-message='segment lg-three-quarter sub-menu-name'
+        class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-message='segment three-quarter sub-menu-name'
         class-badge='segment badge'
 
         value-badge='${value}'
@@ -53,15 +53,15 @@ solid-widget(name='hubl-menu-fix-url-contact')
 
 solid-widget(name='hubl-menu-fix-url-circle')
   template
-    solid-link.segment.lg-full.sm-full(data-src="${value}" next="circle")
-      solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
+    solid-link.segment.full(data-src="${value}" next="circle")
+      solid-display.segment.full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
         fields='segment(status, circle(name, jabberID), badge)'
-        class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
 
         class-status='segment text-top sub-menu-icon'
 
-        class-circle='segment lg-three-quarter sub-menu-name'
+        class-circle='segment three-quarter sub-menu-name'
 
         class-name='ellipsis-content'
 
@@ -77,15 +77,15 @@ solid-widget(name='hubl-menu-fix-url-circle')
 
 solid-widget(name='hubl-menu-fix-url-project')
   template
-    solid-link.segment.lg-full.sm-full(data-src="${value}" next="project")
-      solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
+    solid-link.segment.full(data-src="${value}" next="project")
+      solid-display.segment.full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
         fields='segment(status, project(customer.name, name, jabberID), badge)'
-        class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
 
         class-status='segment text-top sub-menu-icon'
 
-        class-project='segment lg-three-quarter sub-menu-name'
+        class-project='segment three-quarter sub-menu-name'
 
         class-customer.name='ellipsis-content'
         class-name='ellipsis-content'
@@ -103,47 +103,47 @@ solid-widget(name='hubl-menu-fix-url-project')
 
 solid-router#navbar-router(default-route='dashboard')
   if endpoints.get.dashboards
-    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard')
+    solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard')
       div.segment.margin-right-xxsmall
         div.icon.icon-small.icon-home
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard")
     div.divider
   if publicDirectory && endpoints.get.users
-    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
+    solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
       div.segment.margin-right-xxsmall
         div.icon.icon-small.icon-people
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
     div.divider
   if endpoints.get.joboffers
-    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer')
+    solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-briefcase
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
     div.divider
   if endpoints.get.resources
-    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources')
+    solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-docs
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
     div.divider
   if endpoints.get.polls
-    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls')
+    solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-bubbles
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
     div.divider
   if endpoints.get.events
-    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events')
+    solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-calendar
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
     div.divider
   if endpoints.get.projects
     div.menu-wrapper
-      solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(next='admin-projects')
+      solid-link.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(next='admin-projects')
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-folder-alt
-        div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
+        div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
         div.menu-chevron.segment
           div.icon-arrow-right-circle
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
@@ -167,10 +167,10 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.get.circles
     div.menu-wrapper
-      solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(next='admin')
+      solid-link.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(next='admin')
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-folder-alt
-        div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
+        div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
         div.menu-chevron.segment
           div.menu-icon.icon-arrow-right-circle
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
@@ -193,10 +193,10 @@ solid-router#navbar-router(default-route='dashboard')
         )
     div.divider
     div.menu-wrapper
-      div.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
+      div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-envelope-letter
-        div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
+        div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
         div.menu-chevron.segment
           div.icon-arrow-up
     solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
@@ -210,7 +210,7 @@ solid-router#navbar-router(default-route='dashboard')
         //- search-label-contact.name=""
         //- data-trans="search-label-contact.name=menuLeft.search"
         //- search-widget-contact.name="hubl-search-users"
-      solid-display.segment.lg-full.sm-full.whitespace-normal(
+      solid-display.segment.full.whitespace-normal(
         bind-user
         nested-field='contacts'
         fields='contact'
diff --git a/src/views/partials/project/page-project-chat.pug b/src/views/partials/project/page-project-chat.pug
index 48e24a9..96f1aa4 100644
--- a/src/views/partials/project/page-project-chat.pug
+++ b/src/views/partials/project/page-project-chat.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
   solid-display.text-xxlarge.text-letter-spacing-large(
     bind-resources
     fields='const-title1, number, customer.name, dash, name'
@@ -13,7 +13,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-
     value-dash=' - '
   )
 
-.chat-view.segment.lg-full.sm-full.whitespace-normal
+.chat-view.segment.full.whitespace-normal
   solid-xmpp-chat(
     data-authentication='login',
     data-auto-login='true',
diff --git a/src/views/partials/project/page-project-edit.pug b/src/views/partials/project/page-project-edit.pug
index 811bbd5..b32cbda 100644
--- a/src/views/partials/project/page-project-edit.pug
+++ b/src/views/partials/project/page-project-edit.pug
@@ -1,6 +1,6 @@
 solid-ac-checker(permission='acl:Read', bind-resources)
-  div.segment.lg-full.sm-full.padding-large.border-bottom.border-color-grey
-    div.segment.lg-half.sm-full
+  div.segment.full.padding-large.border-bottom.border-color-grey
+    div.segment.half.sm-full
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='const-title1, number, customer.name, dash, name'
@@ -14,10 +14,10 @@ solid-ac-checker(permission='acl:Read', bind-resources)
         value-const-title1='N°'
         value-dash=' - '
       )
-    div.segment.lg-half.sm-hidden.text-right
+    div.segment.half.sm-hidden.text-right
       solid-link(class='backlink', bind-resources, next='project-profile' data-trans='project.edit.backlink')
 
-div.segment.lg-full.sm-full.padding-large.whitespace-normal
+div.segment.full.padding-large.whitespace-normal
 
   solid-widget(name="project-edit-members-delete")
     template
@@ -55,12 +55,12 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
       label-captain=''
       label-help=''
 
-      class-customer.name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-      class-name='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
-      class-description='segment margin-bottom-xxsmall lg-full sm-full text-small text-semibold text-uppercase text-color-heading'
-      class-captain='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-      class-linebreak='segment lg-full'
-      class-help='segment lg-full sm-full text-small margin-bottom-medium padding-left-small'
+      class-customer.name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+      class-name='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+      class-description='segment margin-bottom-xxsmall full text-small text-semibold text-uppercase text-color-heading'
+      class-captain='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+      class-linebreak='segment full'
+      class-help='segment full sm-full text-small margin-bottom-medium padding-left-small'
 
       widget-description='solid-form-richtext-label'
       widget-captain='solid-form-dropdown-autocompletion-label'
@@ -75,10 +75,10 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
       data-trans='label-name=project.edit.labelName;label-captain=project.edit.labelCaptain;label-customer.name=project.edit.labelCustomer;label-description=project.edit.labelDescription;label-help=project.edit.descriptionHelp;submit-button=project.edit.buttonSubmit'
     )
 
-  h3.segment.lg-full.sm-full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.edit.subTitle')
+  h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.edit.subTitle')
 
   solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    solid-form.block.segment.margin-bottom-xlarge.form(
+    solid-form.segment.block.margin-bottom-xlarge.form(
       bind-resources 
       nested-field='members'
       fields='user'
@@ -95,8 +95,8 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
   .segment.table-wrapper
     .table
       div.table-header.bg-color-third.text-color-heading
-        div.segment.table-cell.lg-half(data-trans='project.edit.tableHeader1')
-        div.segment.table-cell.lg-half(data-trans='project.edit.tableHeader2')
+        div.segment.table-cell.half(data-trans='project.edit.tableHeader2')
+        div.segment.table-cell.half(data-trans='project.edit.tableHeader1')
 
       //-class='table-body'
       solid-display(
@@ -106,19 +106,19 @@ div.segment.lg-full.sm-full.padding-large.whitespace-normal
         fields='cell(segment1(user.account.picture), segment2(line1(user.name, is_admin), line2(atom, user.communities))), self'
         loader-id='loader-project-edit'
 
-        class-cell='segment table-cell lg-half labelled-avatar two-lines text-left'
-        class-self='segment table-cell lg-half text-center'
+        class-cell='segment table-cell half labelled-avatar two-lines text-left'
+        class-self='segment table-cell half text-center'
 
         class-segment1='segment'
         class-user.account.picture='avatar'
 
-        class-segment2='segment lg-three-quarter margin-left-xsmall'
-        class-line1='block'
-        class-user.name='text-small text-semibold text-color-heading text-sub'
-        class-is_admin='segment margin-left-medium tag color-primary'
-        class-line2='block'
+        class-segment2='segment three-quarter margin-left-xsmall'
+        class-line1='segment block'
+        class-user.name='text-small text-semibold text-color-heading text-sub margin-right-medium'
+        class-is_admin='segment tag color-primary'
+        class-line2='segment block'
         class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
-        class-user.communities='lg-full'
+        class-user.communities='full'
         
         multiple-user.communities
         multiple-user.communities-fields="community.name"
diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug
index 90f9dd9..6dd3ab3 100644
--- a/src/views/partials/project/page-project-profile.pug
+++ b/src/views/partials/project/page-project-profile.pug
@@ -3,8 +3,8 @@ solid-router(default-route='project-profile', hidden)
   solid-route(name='project-edit')
 
 #project-profile(hidden, data-view="project-profile")
-  solid-ac-checker.block(permission='acl:Read', bind-resources)
-    div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  solid-ac-checker.segment.block(permission='acl:Read', bind-resources)
+    div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='const-title1, number, customer.name, dash, name'
@@ -23,7 +23,7 @@ solid-router(default-route='project-profile', hidden)
     template 
       solid-link.icon.icon-secondary.hover.icon-speech.margin-left-xsmall.margin-right-medium(data-src='\${value}', next='messages')
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
+  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
     div#loader-project-profile.loader
       div
       div
@@ -31,7 +31,7 @@ solid-router(default-route='project-profile', hidden)
       div
   
     div.whitespace-normal
-      solid-display.segment.lg-half.sm-full.sm-margin-bottom-medium(
+      solid-display.segment.half.sm-full.sm-margin-bottom-medium(
         bind-resources
         fields='creationDateSet(title, creationDate)'
         loader-id='loader-project-profile'
@@ -44,13 +44,13 @@ solid-router(default-route='project-profile', hidden)
         widget-creationDate='solid-display-value-date'
       )
       
-      solid-ac-checker.segment.lg-half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
+      solid-ac-checker.segment.half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
         solid-ac-checker(permission='acl:Delete', bind-resources)
           solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonModify')
         solid-ac-checker(no-permission='acl:Delete', bind-resources)
           solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonAdd')
       
-      solid-ac-checker.segment.lg-full.sm-full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
+      solid-ac-checker.segment.full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
         solid-delete(
           class='segment sm-full button text-xsmall text-bold text-uppercase text-center color-secondary bordered'
           bind-resources
@@ -69,7 +69,7 @@ solid-router(default-route='project-profile', hidden)
             next='project-left'
           )
 
-      solid-ac-checker.segment.lg-full.text-right.margin-bottom-large(no-permission='acl:Delete', bind-resources)
+      solid-ac-checker.segment.full.text-right.margin-bottom-large(no-permission='acl:Delete', bind-resources)
         solid-display(
           bind-resources
           nested-field='members'
@@ -104,7 +104,7 @@ solid-router(default-route='project-profile', hidden)
 
     h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.profile.subTitle')
 
-    solid-display.segment.lg-full.sm-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.sm-children-full.children-margin-bottom-medium(
+    solid-display.segment.full.labelled-avatar.two-lines.whitespace-normal.children.children-full.sm-children-full.children-margin-bottom-medium(
       bind-resources
       nested-field='members'
       fields='segment1(user.account.picture), segment2(line1(user.name, user), line2(atom, user.communities))'
@@ -112,12 +112,12 @@ solid-router(default-route='project-profile', hidden)
       class-segment1='segment'
       class-user.account.picture='avatar'
 
-      class-segment2='segment lg-three-quarter margin-left-xsmall'
-      class-line1='block'
+      class-segment2='segment three-quarter margin-left-xsmall'
+      class-line1='segment block'
       class-user.name='text-small text-semibold text-color-heading text-sub'
-      class-line2='block'
+      class-line2='segment block'
       class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
-      class-user.communities='lg-full'
+      class-user.communities='full'
 
       multiple-user.communities
       multiple-user.communities-fields="community.name"
diff --git a/src/views/partials/widgets/hubl-captain.pug b/src/views/partials/widgets/hubl-captain.pug
index 6e9a435..61e0487 100644
--- a/src/views/partials/widgets/hubl-captain.pug
+++ b/src/views/partials/widgets/hubl-captain.pug
@@ -4,19 +4,19 @@ solid-widget(name='hubl-captain-contact')
 
 solid-widget(name='hubl-captain')
   template
-    solid-display.segment.lg-full.margin-bottom-large.labelled-avatar.two-lines(
+    solid-display.segment.full.margin-bottom-large.labelled-avatar.two-lines(
       data-src="${value}"
       fields='segment1(account.picture), segment2(line1(name, user), line2(atom, communities))'
 
       class-segment1='segment'
       class-account.picture='avatar'
       
-      class-segment2='segment lg-three-quarter margin-left-xsmall'
-      class-line1='block'
+      class-segment2='segment three-quarter margin-left-xsmall'
+      class-line1='segment block'
       class-name='text-small text-semibold text-color-heading text-sub'
-      class-line2='block'
+      class-line2='segment block'
       class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
-      class-communities='lg-full'
+      class-communities='full'
 
       value-user='${value}'