From 6a07f798d33b1a23753cca48a9952cdfba1e4f77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <PopDaph@users.noreply.github.com>
Date: Tue, 3 Oct 2023 17:09:46 +0200
Subject: [PATCH] Fix display agent suggestion on mobile (#1930)

---
 .../assistant/conversation/AgentSuggestion.tsx        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/front/components/assistant/conversation/AgentSuggestion.tsx b/front/components/assistant/conversation/AgentSuggestion.tsx
index c2206ecf59d1..807a037c2282 100644
--- a/front/components/assistant/conversation/AgentSuggestion.tsx
+++ b/front/components/assistant/conversation/AgentSuggestion.tsx
@@ -36,19 +36,18 @@ export function AgentSuggestion({
       <div className="text-xs font-bold text-element-600">
         Which Assistant would you like to talk with?
       </div>
-      <div className="mt-3 flex items-center gap-2">
-        <Button.List>
-          {agents.slice(0, 3).map((agent) => (
+      <div className="mt-3 flex flex-col gap-2 sm:flex-row">
+        {agents.slice(0, 3).map((agent) => (
+          <div key={`message-${userMessage.sId}-suggestion-${agent.sId}`}>
             <Button
-              key={`message-${userMessage.sId}-suggestion-${agent.sId}`}
               size="xs"
               variant="avatar"
               label={`@${agent.name}`}
               onClick={() => selectSuggestionHandler(agent)}
               avatar={agent.pictureUrl}
             />
-          ))}
-        </Button.List>
+          </div>
+        ))}
         <AssistantPicker
           owner={owner}
           assistants={agents.slice(3)}