fix: correct various UI glitches (#3110)

MartinCupela · web-flow · commit 6605f6361f4d · 2026-04-14T11:13:18.000+02:00
diff --git a/examples/vite/src/ChatLayout/Panels.tsx b/examples/vite/src/ChatLayout/Panels.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   AIStateIndicator,
   Channel,
@@ -22,6 +22,7 @@ import {
   useThreadsViewContext,
 } from 'stream-chat-react';
 
+import { DESKTOP_LAYOUT_BREAKPOINT } from './constants.ts';
 import { SidebarResizeHandle, ThreadResizeHandle } from './Resize.tsx';
 import { useSidebar } from './SidebarContext.tsx';
 import { ThreadStateSync } from './Sync.tsx';
@@ -94,9 +95,15 @@ export const ChannelsPanels = ({
   sort: ChannelSort;
 }) => {
   const { channel } = useChatContext('ChannelsPanels');
-  const { sidebarOpen } = useSidebar();
+  const { closeSidebar, sidebarOpen } = useSidebar();
   const channelsLayoutRef = useRef<HTMLDivElement | null>(null);
 
+  useEffect(() => {
+    if (!channel?.id || typeof window === 'undefined') return;
+    if (window.innerWidth >= DESKTOP_LAYOUT_BREAKPOINT) return;
+    closeSidebar();
+  }, [channel?.id, closeSidebar]);
+
   return (
     <ChatView.Channels>
       <div
diff --git a/src/components/Button/styling/Button.scss b/src/components/Button/styling/Button.scss
@@ -160,6 +160,11 @@
       align-items: center;
       justify-content: center;
       border-radius: var(--button-radius-full);
+
+      .str-chat__icon {
+        height: var(--icon-size-sm);
+        width: var(--icon-size-sm);
+      }
     }
 
     .str-chat__button__content {
diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx
@@ -143,9 +143,8 @@ export const IconBellOff = createIcon(
   />,
 );
 
-// was: IconBookmark
-export const IconSave = createIcon(
-  'IconSave',
+export const IconBookmark = createIcon(
+  'IconBookmark',
   <path
     d='M15 17.5L10 14.375L5 17.5V3.75C5 3.58424 5.06585 3.42527 5.18306 3.30806C5.30027 3.19085 5.45924 3.125 5.625 3.125H14.375C14.5408 3.125 14.6997 3.19085 14.8169 3.30806C14.9342 3.42527 15 3.58424 15 3.75V17.5Z'
     fill='none'
@@ -156,9 +155,8 @@ export const IconSave = createIcon(
   />,
 );
 
-// was: IconBookmarkRemove
-export const IconUnsave = createIcon(
-  'IconUnsave',
+export const IconBookmarkRemove = createIcon(
+  'IconBookmarkRemove',
   <path
     d='M5 6.49074V17.5L10 14.375L15 17.5V16M5.125 3.125H14.375C14.5408 3.125 14.6997 3.19085 14.8169 3.30806C14.9342 3.42527 15 3.58424 15 3.75V13M5.125 3.125L3.5 1.5M5.125 3.125L15 13M15 13L17.5 15.5'
     fill='none'
@@ -425,7 +423,7 @@ export const IconXmark = createIcon(
     stroke='currentColor'
     strokeLinecap='round'
     strokeLinejoin='round'
-    strokeWidth='1.5'
+    strokeWidth='2'
   />,
 );
 
@@ -827,7 +825,7 @@ export const IconPlus = createIcon(
     stroke='currentColor'
     strokeLinecap='round'
     strokeLinejoin='round'
-    strokeWidth='1.5'
+    strokeWidth='2'
   />,
 );
 
diff --git a/src/components/Message/ReminderNotification.tsx b/src/components/Message/ReminderNotification.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslationContext } from '../../context';
 import { useStateStore } from '../../store';
 import type { Reminder, ReminderState } from 'stream-chat';
-import { IconBell, IconSave } from '../Icons';
+import { IconBell, IconBookmark } from '../Icons';
 
 export type ReminderNotificationProps = {
   reminder?: Reminder;
@@ -15,10 +15,10 @@ const reminderStateSelector = (state: ReminderState) => ({
 function SavedForLaterContent() {
   const { t } = useTranslationContext();
   return (
-    <p className='str-chat__message-saved-for-later'>
-      <IconSave />
+    <div className='str-chat__message-saved-for-later'>
+      <IconBookmark />
       <span>{t('Saved for later')}</span>
-    </p>
+    </div>
   );
 }
 
diff --git a/src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`ReminderNotification > displays text for bookmark notifications (saved for later) 1`] = `
 <div>
-  <p
+  <div
     class="str-chat__message-saved-for-later"
   >
     <svg
-      class="str-chat__icon str-chat__icon--save"
+      class="str-chat__icon str-chat__icon--bookmark"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -22,7 +22,7 @@ exports[`ReminderNotification > displays text for bookmark notifications (saved
     <span>
       Saved for later
     </span>
-  </p>
+  </div>
 </div>
 `;
 
diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss
@@ -110,6 +110,13 @@
         overflow: visible;
       }
     }
+
+    // remove paddings for large-emoji-only messages
+    .str-chat__message-bubble,
+    .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
+    .str-chat__message-inner .str-chat__message-replies-count-button-wrapper {
+      padding-inline: 0;
+    }
   }
 
   &.str-chat__message--is-emoji-only-count-1 {
@@ -133,13 +140,6 @@
     }
   }
 
-  // remove paddings for certain elements in emoji-only messages
-  .str-chat__message-bubble,
-  .str-chat__message-inner .str-chat__message-bubble .str-chat__message-text,
-  .str-chat__message-inner .str-chat__message-replies-count-button-wrapper {
-    padding-inline: 0;
-  }
-
   .str-chat__message-replies-count-button-wrapper::after {
     display: none;
   }
@@ -175,7 +175,7 @@
   @include utils.component-layer-overrides('message');
 
   @mixin chat-bubble-spacing {
-    padding-inline: var(--spacing-sm);
+    padding-inline: var(--spacing-xxs);
 
     p {
       white-space: pre-line;
@@ -240,8 +240,22 @@
       display: flex;
       align-items: center;
       gap: var(--spacing-xxs);
-      font: var(--str-chat__metadata-default-text);
+      font: var(--str-chat__metadata-emphasis-text);
       color: var(--text-primary-text);
+
+      .str-chat__message-pin-indicator__icon {
+        display: flex;
+        align-items: center;
+
+        .str-chat__icon {
+          width: var(--icon-size-xs);
+          height: var(--icon-size-xs);
+
+          path {
+            stroke-width: 2px;
+          }
+        }
+      }
     }
   }
 
@@ -436,6 +450,7 @@
     grid-area: metadata;
     display: flex;
     flex-wrap: wrap;
+    gap: var(--spacing-xxs);
     align-items: center;
     height: var(--size-24);
     color: var(--chat-text-timestamp);
diff --git a/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss b/src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss
@@ -20,9 +20,14 @@
   @include utils.component-layer-overrides('message-also-sent-in-channel');
   font: var(--str-chat__metadata-emphasis-text);
 
-  svg path {
-    stroke-width: 1.5px;
-    stroke: var(--str-chat__message-also-sent-in-channel-color);
+  .str-chat__icon {
+    height: var(--spacing-sm);
+    width: var(--spacing-sm);
+
+    path {
+      stroke-width: 2px;
+      stroke: var(--str-chat__message-also-sent-in-channel-color);
+    }
   }
 
   .str-chat__message-also-sent-in-channel__link-button {
diff --git a/src/components/Message/styling/ReminderNotification.scss b/src/components/Message/styling/ReminderNotification.scss
@@ -31,9 +31,14 @@
   @include utils.component-layer-overrides('message-saved-for-later');
   font: var(--str-chat__metadata-emphasis-text);
 
-  svg path {
-    stroke-width: 1.5px;
-    stroke: var(--str-chat__message-saved-for-later-color);
+  svg {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+
+    path {
+      stroke-width: 2px;
+      stroke: var(--str-chat__message-saved-for-later-color);
+    }
   }
 }
 
diff --git a/src/components/MessageActions/MessageActions.defaults.tsx b/src/components/MessageActions/MessageActions.defaults.tsx
@@ -6,6 +6,8 @@ import {
   IconAudio,
   IconBell,
   IconBellOff,
+  IconBookmark,
+  IconBookmarkRemove,
   IconCopy,
   IconDelete,
   IconEdit,
@@ -19,10 +21,8 @@ import {
   IconQuote,
   IconReply,
   IconRetry,
-  IconSave,
   IconThread,
   IconUnpin,
-  IconUnsave,
   IconUserCheck,
 } from '../Icons';
 import { isUserMuted } from '../Message/utils';
@@ -344,7 +344,7 @@ const DefaultMessageActionComponents = {
             reminder ? t('aria/Remove Save For Later') : t('aria/Bookmark Message')
           }
           className={msgActionsBoxButtonClassName}
-          Icon={reminder ? IconUnsave : IconSave}
+          Icon={reminder ? IconBookmarkRemove : IconBookmark}
           onClick={async () => {
             try {
               if (reminder) {
diff --git a/src/components/MessageComposer/QuotedMessagePreview.tsx b/src/components/MessageComposer/QuotedMessagePreview.tsx
@@ -34,13 +34,13 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import type { MessageContextValue } from '../../context';
 import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton';
 import {
+  IconCamera,
   IconFile,
   IconLink,
   IconLocation,
   IconPlayFill,
   IconPoll,
   IconVideo,
-  IconVideoFill,
   IconVoice,
 } from '../Icons';
 import clsx from 'clsx';
@@ -268,7 +268,7 @@ const getAttachmentIconWithType = (
     const imageAttachment = groupedAttachments.images[0];
     return {
       ...result,
-      Icon: IconVideoFill,
+      Icon: IconCamera,
       PreviewImage: (
         <BaseImage
           alt={imageAttachment.fallback}
diff --git a/src/components/MessageComposer/styling/QuotedMessagePreview.scss b/src/components/MessageComposer/styling/QuotedMessagePreview.scss
@@ -72,6 +72,10 @@
       min-width: 40px;
       overflow: hidden;
 
+      img {
+        object-fit: cover;
+      }
+
       .str-chat__attachment-preview__thumbnail__play-indicator {
         display: flex;
         align-items: center;
diff --git a/src/components/MessageComposer/styling/SendToChannelCheckbox.scss b/src/components/MessageComposer/styling/SendToChannelCheckbox.scss
@@ -54,7 +54,7 @@
     }
 
     .str-chat__send-to-channel-checkbox__checkmark {
-      color: var(--control-radiocheck-icon-selected);
+      color: var(--control-checkbox-icon);
       opacity: 0;
       display: flex;
       align-items: center;
diff --git a/src/components/Notifications/styling/Notification.scss b/src/components/Notifications/styling/Notification.scss
@@ -3,7 +3,6 @@
   align-items: center;
   gap: var(--spacing-xs);
   min-height: 48px;
-  min-width: 200px;
   max-width: 100%;
   padding: var(--spacing-xs);
   position: relative;
@@ -21,6 +20,7 @@
     display: flex;
     flex: 1 1 auto;
     gap: var(--spacing-xs);
+    padding-inline: var(--spacing-xxs) var(--spacing-xs);
 
     .str-chat__notification-icon {
       display: flex;
diff --git a/src/components/Search/styling/Search.scss b/src/components/Search/styling/Search.scss
@@ -44,11 +44,6 @@
 
     padding-block: var(--spacing-xs);
     padding-inline: var(--spacing-sm);
-
-    .str-chat__icon {
-      width: var(--icon-size-sm);
-      height: var(--icon-size-sm);
-    }
   }
 
   .str-chat__search-bar__exit-search-button {
diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx
@@ -99,9 +99,11 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
 
   return (
     <div className='str-chat__thread-header'>
-      <div className='str-chat__thread-header__start'>
-        {activeChatView === 'threads' && HeaderStartContent && <HeaderStartContent />}
-      </div>
+      {activeChatView === 'threads' && HeaderStartContent && (
+        <div className='str-chat__thread-header__start'>
+          <HeaderStartContent />
+        </div>
+      )}
       <div className='str-chat__thread-header-details'>
         <div className='str-chat__thread-header-title'>{t('Thread')}</div>
         <ThreadHeaderSubtitle
@@ -110,8 +112,8 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
           threadList
         />
       </div>
-      <div className='str-chat__thread-header__end'>
-        {!threadInstance && (
+      {!threadInstance && (
+        <div className='str-chat__thread-header__end'>
           <Button
             appearance='ghost'
             aria-label={t('aria/Close thread')}
@@ -124,8 +126,8 @@ export const ThreadHeader = (props: ThreadHeaderProps) => {
           >
             <IconXmark />
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
diff --git a/src/styling/_utils.scss b/src/styling/_utils.scss
