fix: align message reactions vertically to the center of the message list (#3064)

Author: MartinCupela

examples/vite/src/AppSettings/AppSettings.scss

@@ -379,18 +379,17 @@
     }
 
     .app__settings-modal__body {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
     }
 
     .app__settings-modal__tabs {
-      border-right: 0;
-      border-bottom: 1px solid var(--border-core-default);
-      display: flex;
-      gap: 8px;
-      padding: 10px 12px;
-      overflow-x: auto;
-      overscroll-behavior: contain;
-      overflow-y: hidden;
+      border-right: 1px solid var(--border-core-default);
+      border-bottom: 0;
+      display: block;
+      gap: 0;
+      padding: 10px;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 }

examples/vite/src/AppSettings/tabs/Reactions/ReactionsTab.tsx

@@ -81,22 +81,22 @@ export const ReactionsTab = () => {
         <div className='app__settings-modal__field-label'>Horizontal alignment</div>
         <div className='app__settings-modal__options-row'>
           <Button
-            aria-pressed={!reactions.flipHorizontalPosition}
+            aria-pressed={reactions.flipHorizontalPosition}
             className='app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'
             onClick={() =>
               appSettingsStore.partialNext({
-                reactions: { ...reactions, flipHorizontalPosition: false },
+                reactions: { ...reactions, flipHorizontalPosition: true },
               })
             }
           >
             Align start
           </Button>
           <Button
-            aria-pressed={reactions.flipHorizontalPosition}
+            aria-pressed={!reactions.flipHorizontalPosition}
             className='app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'
             onClick={() =>
               appSettingsStore.partialNext({
-                reactions: { ...reactions, flipHorizontalPosition: true },
+                reactions: { ...reactions, flipHorizontalPosition: false },
               })
             }
           >

src/components/Message/styling/Message.scss

@@ -296,10 +296,10 @@
 
     .str-chat__message-inner {
       .str-chat__message-reactions-host {
-        justify-self: flex-start;
+        justify-self: flex-end;
 
         &:has(.str-chat__message-reactions--flipped-horizontally) {
-          justify-self: flex-end;
+          justify-self: flex-start;
         }
 
         &:has(.str-chat__message-reactions--top) {
@@ -343,10 +343,10 @@
 
     .str-chat__message-inner {
       .str-chat__message-reactions-host {
-        justify-self: flex-end;
+        justify-self: flex-start;
 
         &:has(.str-chat__message-reactions--flipped-horizontally) {
-          justify-self: flex-start;
+          justify-self: flex-end;
         }
 
         &:has(.str-chat__message-reactions--top) {