diff --git a/web-app/src/containers/dialogs/OutOfContextDialog.tsx b/web-app/src/containers/dialogs/OutOfContextDialog.tsx
index d73fdacc4..dad3f84e5 100644
--- a/web-app/src/containers/dialogs/OutOfContextDialog.tsx
+++ b/web-app/src/containers/dialogs/OutOfContextDialog.tsx
@@ -36,7 +36,10 @@ export default function OutOfContextPromiseModal() {
 
   return (
     <Dialog open={isModalOpen} onOpenChange={handleDialogOpen}>
-      <DialogContent>
+      <DialogContent
+        showCloseButton={false}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <DialogHeader>
           <DialogTitle>{t('model-errors:title')}</DialogTitle>
         </DialogHeader>
@@ -57,7 +60,7 @@ export default function OutOfContextPromiseModal() {
             {t('model-errors:truncateInput')}
           </Button>
           <Button
-            asChild
+            autoFocus
             onClick={() => {
               handleContextLength()
             }}
diff --git a/web-app/src/hooks/useChat.ts b/web-app/src/hooks/useChat.ts
index 8b84b5881..0a5e07d36 100644
--- a/web-app/src/hooks/useChat.ts
+++ b/web-app/src/hooks/useChat.ts
@@ -365,8 +365,7 @@ export const useChat = () => {
             if (
               typeof errorMessage === 'string' &&
               errorMessage.includes(OUT_OF_CONTEXT_SIZE) &&
-              selectedModel &&
-              troubleshooting
+              selectedModel
             ) {
               const method = await showIncreaseContextSizeModal()
               if (method === 'ctx_len') {
diff --git a/web-app/src/routes/threads/$threadId.tsx b/web-app/src/routes/threads/$threadId.tsx
index 697dc897f..4cef95d12 100644
--- a/web-app/src/routes/threads/$threadId.tsx
+++ b/web-app/src/routes/threads/$threadId.tsx
@@ -4,8 +4,7 @@ import { UIEventHandler } from 'react'
 import debounce from 'lodash.debounce'
 import cloneDeep from 'lodash.clonedeep'
 import { cn } from '@/lib/utils'
-import { ArrowDown } from 'lucide-react'
-import { Play } from 'lucide-react'
+import { ArrowDown, Play } from 'lucide-react'
 
 import HeaderPage from '@/containers/HeaderPage'
 import { useThreads } from '@/hooks/useThreads'
@@ -328,7 +327,7 @@ function ThreadDetail() {
           >
             {showScrollToBottomBtn && (
               <div
-                className="bg-main-view-fg/10 px-4 border border-main-view-fg/5 flex items-center justify-center rounded-xl gap-x-2 cursor-pointer pointer-events-auto"
+                className="bg-main-view-fg/10 px-2 border border-main-view-fg/5 flex items-center justify-center rounded-xl gap-x-2 cursor-pointer pointer-events-auto"
                 onClick={() => {
                   scrollToBottom(true)
                   setIsUserScrolling(false)
@@ -340,7 +339,7 @@ function ThreadDetail() {
             )}
             {showGenerateAIResponseBtn && (
               <div
-                className="bg-main-view-fg/10 px-4 border border-main-view-fg/5 flex items-center justify-center rounded-xl gap-x-2 cursor-pointer pointer-events-auto"
+                className="mx-2 bg-main-view-fg/10 px-2 border border-main-view-fg/5 flex items-center justify-center rounded-xl gap-x-2 cursor-pointer pointer-events-auto"
                 onClick={generateAIResponse}
               >
                 <p className="text-xs">{t('common:generateAiResponse')}</p>