app/components/Header.tsx

@@ -40,9 +40,9 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
             </button>
           )}
         </nav>
-        <div className="header-button header-logo">
+        <button onClick={() => onViewChange('AI')} className="header-button header-logo">
           {/* AI logo or text */}
-        </div>
+        </button>
         <div className="login-button">
           <Login /> 
         </div>

app/page.tsx

@@ -53,6 +53,7 @@ const LandingPage: React.FC = () => {
 
   return (
     <>
+      <div className="container">
         <Header
           toggleDivs={toggleDivs}
           showDivs={showDivs}
@@ -60,7 +61,6 @@ const LandingPage: React.FC = () => {
           showHistoryModelsToggle={true}
           showToggle={view === 'AI'} // Pass the condition here
           />
-      <div className="container">
         <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
           {showDivs && (
             <div className="history-models">

app/styles/container.css

@@ -2,8 +2,10 @@
 .container,
 .content {
     display: flex;
+    height: 100vh;
     width: 100vw;
-    padding-top: 0.025vh;
+    overflow: hidden;
+    position: relative; /* Ensure relative positioning for proper transitions */
 }
 
 .left-panel {
@@ -28,7 +30,6 @@
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
-    height: min-content;
 }
 
 /* Adjust margin-left when panel is shown or hidden */
@@ -38,5 +39,4 @@
 
 .conversation-container.collapsed {
     margin-left: 1vw; /* Space for the left panel */
-    bottom: 0;
 }

app/styles/global.css

@@ -1,11 +1,12 @@
 html,
 body {
     height: 100vh;
-    /* overflow: hidden; */
+    overflow: hidden;
     position: relative;
 }
 
 body {
+    margin-top: 2em;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -13,6 +14,7 @@ body {
     color: var(--text-color);
     font-family: var(--font-family);
     font-size: var(--font-size);
+    margin-bottom: 0.5em;
 }
 
 
@@ -22,10 +24,6 @@ header {
     padding: 1rem; /* Adjust padding as needed */
 }
 
-main{
-    height: 100%;
-}
-
 button {
     background-color: var(--button-background-color);
     color: var(--text-color);

app/styles/header.css

@@ -4,7 +4,7 @@ header{
     top: 0;
     left: 0;
     width: 100%;
-    height: 10vh;
+    height: 5em;
     display: flex;
     align-items: center;
     font-size: 1em;
@@ -40,10 +40,10 @@ header{
 .nav-links{
     position: absolute;
     display: flex;
-    top: 2vh;
+    top: 1em;
     gap: 1em;
     width: 25em;
-    height: 2em;
+    height: 3em;
 }
 
 .nav-btn{
@@ -65,9 +65,9 @@ header{
 }
 
 .login-button .header-login-button{
-    font-size: 2vh;
+    font-size: 1em;
     position: absolute;
-    top: 1.5vh;
+    top: 1.5em;
     right: 1vw;
     padding: 10px 20px;
     background-color: var(--input-button-color);

app/styles/output.css

@@ -6,7 +6,6 @@
     background-color: var(--output-background-color);
     padding: 1em;
     margin: 1em;
-    margin-top: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -73,7 +72,4 @@
 
 #copiedText{
     margin-top: 1em;
-    cursor:default;
-    pointer-events: none;
-    user-select: none;
 }