From 8a084a05c9796d67205cfd783cc33a4d6ecb74bd Mon Sep 17 00:00:00 2001
From: Ovindu Atukorala <ovindu.atukorala@gmail.com>
Date: Fri, 4 Oct 2024 19:40:54 +0000
Subject: [PATCH] Fix formatting of mobile retry button

---
 frontend/src/components/RetryIcon.tsx      | 4 ++--
 frontend/src/conversation/Conversation.tsx | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/RetryIcon.tsx b/frontend/src/components/RetryIcon.tsx
index 27ed6028..19d76aec 100644
--- a/frontend/src/components/RetryIcon.tsx
+++ b/frontend/src/components/RetryIcon.tsx
@@ -4,8 +4,8 @@ const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlSpace="preserve"
-    width={16}
-    height={16}
+    width={props.width ? props.width : 16}
+    height={props.height ? props.height : 16}
     fill={props.fill}
     stroke={props.stroke}
     viewBox="0 0 383.748 383.748"
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index d5908ca3..de88b6d9 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -10,7 +10,7 @@ import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
 import RetryIcon from '../components/RetryIcon';
 import Hero from '../Hero';
-import { useDarkTheme } from '../hooks';
+import { useDarkTheme, useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
@@ -39,6 +39,7 @@ export default function Conversation() {
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const { t } = useTranslation();
+  const { isMobile } = useMediaQuery();
 
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
@@ -153,10 +154,12 @@ export default function Conversation() {
           }}
         >
           <RetryIcon
+            width={isMobile ? 10 : 16}
+            height={isMobile ? 10 : 16}
             fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
             stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
           />
-          Retry
+          <p className="hidden lg:block">Retry</p>
         </button>
       );
       responseView = (