fix: assorted UI/UX fixes (Giphy, polls, dialogs, composer, headers) (#3081)

### 🎯 Goal

Bundle of UI/UX fixes across multiple components.

### 🛠 Implementation details

**fix(Attachment): use pixel-based sizing constraints for Giphy images**

Giphy images used percentage-based CSS constraints which don't resolve
to pixel values. Replaced with pixel-based constraints via
`var(--str-chat__attachment-max-width)` and the
`clamped-height-from-original-image-dimensions` mixin.

**fix(Message): prevent editing Giphy messages**

Giphy messages (`command === 'giphy'`) are no longer editable since
their content is generated by the /giphy command.

**fix(Form): remove redundant onClick on SwitchField label**

`SwitchFieldLabel` had both `htmlFor` and a programmatic `onClick`,
causing the checkbox to toggle twice when clicking label text. Removed
the redundant `onClick`.

**fix(Poll): fall back to user ID instead of "Anonymous" for voters
without a display name**

`PollVoteAuthor` fell back to "Anonymous" when `vote.user.name` was
falsy, making public polls appear anonymous. Now falls back to
`vote.user.id`.

**fix(Dialog): prevent dialog overlay from blocking pointer events**

The dialog overlay expanded to the nearest positioned ancestor, blocking
the channel list. Set `pointer-events: none` on the overlay with
`pointer-events: auto` on dialog contents.

**fix(MessageComposer): hide textarea scrollbar inside rounded compose
area**

Hidden with `scrollbar-width: none`, matching the pattern used in polls,
reactions, and search.

**fix(MessageComposer): restore pre-edit composer state when cancelling
edit**

When exiting edit mode, the composer restores to its pre-edit state
using a WeakMap-based snapshot mechanism. The snapshot is discarded
after a successful edit save.

**fix(ChannelHeader, ThreadHeader): truly center title text**

The title wasn't centered because flanking elements had different
widths. Wrapped the toggle button and avatar/close button in
always-rendered start/end container divs with `flex: 1`, so the center
element is truly centered regardless of flanking content.

**style(AudioPlayback): bump PlaybackRateButton min-width**

Increased from 40px to 48px to prevent text clipping.

**fix(ChannelList): scope dialog overlay with `position: relative`**

The ChannelList lacked `position: relative`, so its dialog overlay
(`position: absolute; inset: 0`) escaped to the nearest positioned
ancestor higher in the tree — covering the entire sidebar when consumers
override `transform: none` on the channel list.

**fix(Modal): restore pointer events on GlobalModal**

`GlobalModal` portals into `.str-chat__dialog-overlay` (which has
`pointer-events: none`) without using `DialogAnchor`, so its content
never received the `.str-chat__dialog-contents` class that restores
`pointer-events: auto`. The modal was visible but completely
click-through.

### 🎨 UI Changes

- Giphy images properly size-constrained with CDN resizing
- Giphy messages no longer show "Edit Message" in actions menu
- Poll creation toggles respond correctly when clicking label text
- Poll vote results show user ID instead of "Anonymous" for nameless
users
- Dialog overlay no longer blocks interaction with the channel list
- Composer textarea no longer shows a scrollbar inside the rounded input
area
- Cancelling edit mode restores the composer to its pre-edit state
- Channel and thread header titles are truly centered
- ChannelList dialog overlay scoped to the channel list area
- GlobalModal is interactive again (no longer click-through)

Author: oliverlaz

src/components/Attachment/styling/Giphy.scss

@@ -14,11 +14,15 @@
   justify-content: center;
   overflow: hidden;
 
-  img {
+  img.str-chat__base-image {
+    @include utils.clamped-height-from-original-image-dimensions(
+      '--str-chat__attachment-max-width',
+      '--str-chat__attachment-max-width'
+    );
+
     object-fit: contain;
-    max-height: 100%;
-    max-width: 100%;
-    height: 100%;
+    max-height: var(--str-chat__attachment-max-width);
+    max-width: var(--str-chat__attachment-max-width);
     width: 100%;
     cursor: default;
   }

src/components/AudioPlayback/styling/PlaybackRateButton.scss

@@ -6,7 +6,7 @@
   justify-content: center;
   align-items: center;
   gap: var(--spacing-xs);
-  min-width: 40px;
+  min-width: 48px;
   min-height: 24px;
   max-height: 24px;
   padding: var(--button-padding-y-sm) var(--spacing-xs);

src/components/ChannelHeader/ChannelHeader.tsx

@@ -71,21 +71,25 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
         'str-chat__channel-header--sidebar-collapsed': !navOpen,
       })}
     >
-      <ToggleSidebarButton mode='expand'>
-        <MenuIcon />
-      </ToggleSidebarButton>
+      <div className='str-chat__channel-header__start'>
+        <ToggleSidebarButton mode='expand'>
+          <MenuIcon />
+        </ToggleSidebarButton>
+      </div>
       <div className='str-chat__channel-header__data'>
         <div className='str-chat__channel-header__data__title'>{displayTitle}</div>
         <ChannelHeaderSubtitle />
       </div>
-      <Avatar
-        className='str-chat__avatar--channel-header'
-        displayMembers={groupChannelDisplayInfo?.members}
-        imageUrl={displayImage}
-        overflowCount={groupChannelDisplayInfo?.overflowCount}
-        size='lg'
-        userName={displayTitle}
-      />
+      <div className='str-chat__channel-header__end'>
+        <Avatar
+          className='str-chat__avatar--channel-header'
+          displayMembers={groupChannelDisplayInfo?.members}
+          imageUrl={displayImage}
+          overflowCount={groupChannelDisplayInfo?.overflowCount}
+          size='lg'
+          userName={displayTitle}
+        />
+      </div>
     </div>
   );
 };

src/components/ChannelHeader/styling/ChannelHeader.scss

@@ -34,12 +34,22 @@
 .str-chat__channel-header {
   @include utils.component-layer-overrides('channel-header');
   @include utils.header-layout;
-  flex: 1;
+
+  .str-chat__channel-header__start {
+    flex: 1;
+    display: flex;
+  }
 
   .str-chat__channel-header__data {
     @include utils.header-text-layout;
   }
 
+  .str-chat__channel-header__end {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .str-chat__channel-header__data__title,
   .str-chat__channel-header__data__subtitle {
     @include utils.ellipsis-text;

src/components/ChannelList/styling/ChannelList.scss

@@ -103,6 +103,7 @@
   flex-direction: column;
   height: 100%;
   max-width: 100%;
+  position: relative;
   min-width: 280px;
   opacity: 1;
   transform: translateX(0);

src/components/Dialog/service/DialogPortal.tsx

@@ -17,13 +17,15 @@ export const DialogPortalDestination = () => {
   const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
   const [destinationRoot, setDestinationRoot] = useState<HTMLDivElement | null>(null);
 
-  // Handle clicks outside the overlay-covered area.
-  // Dismiss policy is manager-level (`dialogManager.closeOnClickOutside`).
+  // Handle clicks outside dialog contents.
+  // Clicks on the overlay itself or outside it close open dialogs;
+  // only clicks on dialog contents (descendants) are ignored.
   useEffect(() => {
     if (!destinationRoot || !dialogManager) return;
 
     const handleDocumentClick = (event: MouseEvent) => {
-      if (destinationRoot.contains(event.target as Node)) return;
+      const target = event.target as Node;
+      if (target !== destinationRoot && destinationRoot.contains(target)) return;
       // Defer so target onClick handlers (e.g. context-menu toggle buttons) can run first.
       setTimeout(() => {
         Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
@@ -56,23 +58,6 @@ export const DialogPortalDestination = () => {
       className='str-chat__dialog-overlay'
       data-str-chat__portal-id={dialogManager?.id}
       data-testid='str-chat__dialog-overlay'
-      onClick={(event) => {
-        if (!dialogManager) return;
-        if (event.target !== event.currentTarget) return;
-        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
-          (dialog) => {
-            if (!dialog.isOpen) return;
-            if (
-              !shouldCloseOnOutsideClick({
-                dialog,
-                managerCloseOnClickOutside: dialogManager.closeOnClickOutside,
-              })
-            )
-              return;
-            dialogManager.close(dialog.id);
-          },
-        );
-      }}
       ref={setDestinationRoot}
       style={
         {

src/components/Dialog/styling/Dialog.scss

@@ -4,4 +4,9 @@
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
   z-index: 2;
+  pointer-events: none;
+
+  .str-chat__dialog-contents {
+    pointer-events: auto;
+  }
 }

src/components/Form/SwitchField.tsx

@@ -55,12 +55,7 @@ export const SwitchField = ({
         ref={inputRef}
       />
       {title ? (
-        <SwitchFieldLabel
-          description={description}
-          htmlFor={id}
-          onClick={() => inputRef.current?.click()}
-          title={title}
-        ></SwitchFieldLabel>
+        <SwitchFieldLabel description={description} htmlFor={id} title={title} />
       ) : (
         children
       )}

src/components/Message/hooks/useUserRole.ts

@@ -38,6 +38,7 @@ export const useUserRole = (
 
   const canEdit =
     !message.poll &&
+    message.command !== 'giphy' &&
     ((!onlySenderCanEdit && channelCapabilities['update-any-message']) ||
       (isMyMessage && channelCapabilities['update-own-message']));
 

src/components/MessageActions/MessageActions.defaults.tsx

@@ -27,6 +27,7 @@ import {
 } from '../Icons';
 import { isUserMuted } from '../Message/utils';
 import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';
+import { savePreEditSnapshot } from '../MessageComposer/preEditSnapshot';
 import { addNotificationTargetTag, useNotificationTarget } from '../Notifications';
 import { useMessageReminder } from '../Message/hooks/useMessageReminder';
 import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithButton';
@@ -175,6 +176,7 @@ const DefaultMessageActionComponents = {
           className={msgActionsBoxButtonClassName}
           Icon={IconEdit}
           onClick={() => {
+            savePreEditSnapshot(messageComposer);
             messageComposer.initState({ composition: message });
             closeMenu();
           }}