Fixed visual discrepancy in Firefox

Author: thatblindgeye

packages/module/src/Message/Message.tsx

@@ -524,15 +524,15 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
             {!isLoading && !isEditable && actions && (
               <>
                 {Array.isArray(actions) ? (
-                  <Flex gap={{ default: 'gapXs' }}>
+                  <div className="pf-chatbot__response-actions-groups">
                     {actions.map((actionGroup, index) => (
                       <ResponseActions
                         key={index}
                         actions={actionGroup.actions || actionGroup}
                         persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
                       />
                     ))}
-                  </Flex>
+                  </div>
                 ) : (
                   <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
                 )}

packages/module/src/ResponseActions/ResponseActions.scss

@@ -22,6 +22,17 @@
   }
 }
 
+.pf-chatbot__response-actions-groups {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: var(--pf-t--global--spacer--xs);
+
+  .pf-chatbot__response-actions {
+    display: flex;
+  }
+}
+
 .pf-v6-c-button.pf-chatbot__button--response-action-clicked.pf-v6-c-button.pf-m-plain.pf-m-small {
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);