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">
+          <button onClick={() => onViewChange('AI')} className="header-button header-logo">
             <img src="/img/logo.png" alt="logo" className="header-logo" />
           </button>
         </li>

app/styles/responsive.css

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