app/Header.tsx

@@ -14,7 +14,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
     <header>
       <ul>
         <li>
-          <button onClick={() => onViewChange('AI')} className="header-button header-logo">
+          <button onClick={() => onViewChange('AI')} className="header-button">
             <img src="/img/logo.png" alt="logo" className="header-logo" />
           </button>
         </li>

app/styles/responsive.css

@@ -1,93 +1,51 @@
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-  *{
+  header li{
-    margin: 0;
+    display: block;
-    padding: 0;
   }
 
-  /* Header styles */
-  header {
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    top: 0;
-    left: 0;
-    margin-top: 5px;
-    padding-top: 0;
-    width: 100%;
-  }
- 
-  /* Container styles */
   .container {
     display: flex;
-    flex-direction: column;
+    justify-content: center; /* Centers horizontally */
-    align-items: center;
+    width: 90vw;
-    width: 100vw;
+    margin-top: 10vh;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
   }
   
-  header li{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0;
-  }
-
-  header li button {
-    margin: 2px;
-    margin-bottom: 0;
-  }
-
-  header li img {
-    height: 1.5em;
-    vertical-align: middle;
-    margin-top: 10px;
-  }
-
-  /* Left panel styles */
   .left-panel {
     display: none; /* Initially hidden */
-    min-width: 90%; /* Takes full width when visible */
+    min-width: 90%; /* Takes full width when shown */
     margin: 0;
   }
   
+
+  .conversation-container {
+      width: 90%;
+  }
+
   .left-panel.visible {
       display: block;
   }
 
-  /* Conversation container styles */
- .conversation-container {
-    width: 90%;
-    height: 90%;
-  }
-
   .conversation-container.collapsed {
-    width: 0;
+      display: none;
-    padding: 0;
-    border: none;
-    overflow: hidden;
   }
 
   .conversation-container.expanded {
       width: 100%;
   } 
   
-  /* Grid styles */
   .grid {
     grid-template-columns: 1fr; /* One item per line */
   }
 
-  /* Model box styles */
   .model-box {
-    max-width: none; /* Remove max-width */
+      max-width: none; /* Remove max-width constraint */
       margin: 0 auto; /* Center each model-box */
   }
 
-  /* Input styles */
   .input {
     grid-column: 1 / -1;
+    flex-direction: row;
     gap: 10px;
     padding: 0.5em;
     margin: 0 auto;