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