Center stuff

Author: arnautov-anton

src/components/ChannelHeader/styling/ChannelHeader.scss

@@ -10,19 +10,19 @@
   @include utils.header-layout;
 
   .str-chat__channel-header__start {
-    flex: 1;
-    display: flex;
+    justify-self: start;
+    min-width: 0;
   }
 
   .str-chat__channel-header__data {
     @include utils.header-text-layout;
-    width: unset;
+    justify-self: center;
+    min-width: 0;
   }
 
   .str-chat__channel-header__end {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
+    justify-self: end;
+    min-width: 0;
   }
 
   .str-chat__channel-header__data__title,

src/components/ChannelList/styling/ChannelList.scss

@@ -41,7 +41,6 @@
     transform var(--str-chat__channel-list-transition-duration)
       var(--str-chat__channel-list-transition-easing);
   width: var(--str-chat__channel-list-width);
-  @include utils.scrollable-y;
   background: var(--background-core-elevation-1);
   color: var(--text-primary);
   border-inline-end: 1px solid var(--border-core-default);
@@ -54,6 +53,8 @@
     .str-chat__channel-list-inner__main {
       height: 100%;
       overflow-y: auto;
+      scrollbar-gutter: stable both-edges;
+      scrollbar-width: thin;
 
       .str-chat__channel-list-empty {
         height: 100%;

src/components/MessageList/styling/MessageList.scss

@@ -19,7 +19,9 @@
 }
 
 .str-chat__message-list {
-  @include utils.scrollable-y;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+  overscroll-behavior: contain;
   display: flex;
   justify-content: center;
   position: relative;

src/components/MessageList/styling/VirtualizedMessageList.scss

@@ -1,9 +1,11 @@
 @use '../../../styling/utils';
 
 .str-chat__virtual-list {
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+
   background: var(--background-core-app);
   color: var(--text-primary);
-  @include utils.scrollable-y;
   --str-chat__message-list-scroll-max-width: calc(
     var(--str-chat__message-composer-max-width) +
       var(--str-chat__message-composer-padding)

src/components/Thread/ThreadHeader.tsx

@@ -99,11 +99,9 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
 
   return (
     <div className='str-chat__thread-header'>
-      {activeChatView === 'threads' && HeaderStartContent && (
-        <div className='str-chat__thread-header__start'>
-          <HeaderStartContent />
-        </div>
-      )}
+      <div className='str-chat__thread-header__start'>
+        {activeChatView === 'threads' && HeaderStartContent && <HeaderStartContent />}
+      </div>
       <div className='str-chat__thread-header-details'>
         <div className='str-chat__thread-header-title'>{t('Thread')}</div>
         <ThreadHeaderSubtitle

src/components/Thread/styling/ThreadHeader.scss

@@ -17,8 +17,8 @@
 
   .str-chat__thread-header-details {
     @include utils.header-text-layout;
-    align-items: start;
-    flex: 1;
+    min-width: 0;
+    justify-self: center;
 
     .str-chat__thread-header-subtitle,
     .str-chat__thread-header-title {
@@ -31,12 +31,13 @@
   }
 
   .str-chat__thread-header__start {
-    display: flex;
+    min-width: 0;
+    justify-self: start;
   }
 
   .str-chat__thread-header__end {
-    display: flex;
-    justify-content: flex-end;
+    min-width: 0;
+    justify-self: end;
   }
 
   .str-chat__close-thread-button {

src/styling/_utils.scss

@@ -99,24 +99,19 @@
 }
 
 @mixin header-layout {
-  display: flex;
-  align-items: center;
   width: 100%;
   padding: var(--spacing-md);
-  gap: var(--spacing-sm);
   height: var(--str-chat__channel-header-height);
-  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
 }
-
 @mixin header-text-layout {
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow-y: hidden; // for Edge
   overflow-x: hidden; // for ellipsis text
-  max-width: 100%;
-  row-gap: var(--spacing-xxs);
-  width: 100%;
 }
 
 @mixin empty-theme($component-name) {