add 'stop' reaction, improve reaction button layout

src/View/ChatPages/messagePage.css

@@ -40,6 +40,7 @@
 }
 
 @media (min-width: 700px) {
+
     #message-page #composer .content-width-constraint,
     #message-page #composer .input-width-constraint {
         display: flex;
@@ -168,27 +169,33 @@
     text-align: right;
 }
 
-.message-bubble > .message-reaction-row {
-  max-width: var(--max-input-width);
-  width: 100%;
+.message-bubble>.message-reaction-row {
+    max-width: var(--max-input-width);
+    width: 100%;
 
-  padding: var(--gap-between-tiles);
-  background: var(--surface);
+    padding: var(--gap-between-tiles);
+    background: var(--surface);
 }
 
-.message-bubble > .message-reaction-row button {
-  min-height: unset;
-  height: 100%;
-  width: 100%;
-  padding: var(--control-padding-compact);
-  gap: 0px;
-  flex: 1 !important;
+.message-bubble>.message-reaction-row button {
+    min-height: unset;
+    height: 100%;
+    width: 100%;
+    padding: var(--control-padding-compact);
+    gap: 0px;
+    flex: 1 !important;
 }
 
-.message-bubble > .message-reaction-row button[zero] {
+.message-bubble>.message-reaction-row button[zero] {
     display: none;
 }
 
 .message-reaction-row {
-    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    grid-template-columns: repeat(3, minmax(80px, 1fr));
+}
+
+@media (min-width: 100px) {
+    .message-reaction-row {
+        grid-template-columns: repeat(3, minmax(80px, 1fr));
+    }
 }

src/View/Components/messageReactionButton.tsx

@@ -39,6 +39,12 @@ export function MessageReactionButton(
             reactionState = chatMessageViewModel.reactionsCheck;
             break;
         }
+        case ReactionSymbols.Stop: {
+            audioLabel = translations.chatPage.message.stopReaction;
+            count = chatMessageViewModel.reactionsStopCount;
+            reactionState = chatMessageViewModel.reactionsStop;
+            break;
+        }
         case ReactionSymbols.Attention: {
             audioLabel = translations.chatPage.message.attentionReaction;
             count = chatMessageViewModel.reactionsAttentionCount;

src/View/Components/messageReactionButtonRow.tsx

@@ -17,6 +17,10 @@ export function MessageReactionButtonRow(
                 chatMessageViewModel,
                 ReactionSymbols.Check,
             )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Stop,
+            )}
             {MessageReactionButton(
                 chatMessageViewModel,
                 ReactionSymbols.Attention,

src/View/translations.ts

@@ -191,6 +191,7 @@ const englishTranslations = {
 
             thumbsUpReaction: "Reaction: thumbs up",
             checkReaction: "Reaction: check",
+            stopReaction: "Reaction: stop sign",
             attentionReaction: "Reaction: exclamation mark",
             doubleAttentionReaction: "Reaction: double exclamation mark",
             questionReaction: "Reaction: question mark",
@@ -462,6 +463,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
                 thumbsUpReaction: "Reaktion: Daumen hoch",
                 checkReaction: "Reaktion: Haken",
+                stopReaction: "Reaktion: Stopp",
                 attentionReaction: "Reaktion: Ausrufezeichen",
                 doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen",
                 questionReaction: "Reaktion: Fragezeichen",
@@ -715,6 +717,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
                 thumbsUpReaction: "Reacción: pulgar hacia arriba",
                 checkReaction: "Reacción: marca de verificación",
+                stopReaction: "Reacción: signo de parada",
                 attentionReaction: "Reaccion: signo de atención",
                 doubleAttentionReaction: "Reaccion: signo de atención doble",
                 questionReaction: "Reaccion: signo de interrogación",