Fix AutoBot horizontal scrolling and update UI labels (#375)

* Initial plan

* Implement AutoBot UX enhancements: width fixes and UI improvements

Co-authored-by: MohabMohie <19201898+MohabMohie@users.noreply.github.com>

* Clean up redundant CSS properties in AutoBot styles

Co-authored-by: MohabMohie <19201898+MohabMohie@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: MohabMohie <19201898+MohabMohie@users.noreply.github.com>

Author: Copilot

src/components/AutoBot/index.tsx

@@ -239,7 +239,7 @@ I searched the official documentation but could not find a verified reference fo
           title="Chat with AutoBot"
         >
           <FontAwesomeIcon icon="fa-solid fa-robot" size="2x" />
-          <span className={styles.badge}>AI</span>
+          <span className={styles.badge}>AutoBot</span>
         </button>
       )}
 
@@ -270,10 +270,10 @@ I searched the official documentation but could not find a verified reference fo
               <button
                 className={styles.iconButton}
                 onClick={toggleChat}
-                aria-label="Close chat"
-                title="Close chat"
+                aria-label="Minimize chat"
+                title="Minimize chat"
               >
-                <FontAwesomeIcon icon="fa-solid fa-times" />
+                <FontAwesomeIcon icon="fa-solid fa-window-minimize" />
               </button>
             </div>
           </div>

src/components/AutoBot/styles.module.css

@@ -51,14 +51,17 @@
   color: white;
   border-radius: 10px;
   padding: 2px 6px;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: bold;
+  white-space: nowrap;
 }
 
 /* Chat Window */
 .chatWindow {
   width: 380px;
+  max-width: calc(100vw - 40px);
   height: 600px;
+  max-height: calc(100vh - 40px);
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
@@ -148,6 +151,7 @@
 .chatMessages {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 16px;
   background: #ffffff;
   display: flex;
@@ -219,7 +223,8 @@
   padding: 10px 14px;
   border-radius: 12px;
   position: relative;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 .userMessage .messageBubble {
@@ -245,6 +250,8 @@
 .markdownContent {
   font-size: 14px;
   line-height: 1.5;
+  max-width: 100%;
+  overflow-wrap: break-word;
 }
 
 .markdownContent p {
@@ -269,6 +276,7 @@
   border-radius: 6px;
   overflow-x: auto;
   margin: 0.5em 0;
+  max-width: 100%;
 }
 
 .markdownContent pre code {
@@ -455,8 +463,10 @@
     right: 0;
     left: 0;
     top: 0;
+    max-width: 100vw;
     max-height: 100vh;
     max-height: 100dvh;
+    overflow-x: hidden;
   }
 
   .chatHeader {
@@ -477,6 +487,7 @@
     /* Ensure proper scrolling on mobile */
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
+    overflow-x: hidden;
     flex: 1;
     min-height: 0; /* Important for flex scrolling */
   }