Merge pull request 'main' (#62) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/62

app/components/Header.tsx

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

app/page.tsx

@@ -53,7 +53,6 @@ const LandingPage: React.FC = () => {
 
   return (
     <>
-      <div className="container">
         <Header
           toggleDivs={toggleDivs}
           showDivs={showDivs}
@@ -61,6 +60,7 @@ 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,10 +2,8 @@
 .container,
 .content {
     display: flex;
-    height: 100vh;
     width: 100vw;
-    overflow: hidden;
+    padding-top: 0.025vh;
-    position: relative; /* Ensure relative positioning for proper transitions */
 }
 
 .left-panel {
@@ -30,6 +28,7 @@
     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 */
@@ -39,4 +38,5 @@
 
 .conversation-container.collapsed {
     margin-left: 1vw; /* Space for the left panel */
+    bottom: 0;
 }

app/styles/global.css

@@ -1,12 +1,11 @@
 html,
 body {
     height: 100vh;
-    overflow: hidden;
+    /* overflow: hidden; */
     position: relative;
 }
 
 body {
-    margin-top: 2em;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -14,7 +13,6 @@ body {
     color: var(--text-color);
     font-family: var(--font-family);
     font-size: var(--font-size);
-    margin-bottom: 0.5em;
 }
 
 
@@ -24,6 +22,10 @@ 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: 5em;
+    height: 10vh;
     display: flex;
     align-items: center;
     font-size: 1em;
@@ -40,10 +40,10 @@ header{
 .nav-links{
     position: absolute;
     display: flex;
-    top: 1em;
+    top: 2vh;
     gap: 1em;
     width: 25em;
-    height: 3em;
+    height: 2em;
 }
 
 .nav-btn{
@@ -65,9 +65,9 @@ header{
 }
 
 .login-button .header-login-button{
-    font-size: 1em;
+    font-size: 2vh;
     position: absolute;
-    top: 1.5em;
+    top: 1.5vh;
     right: 1vw;
     padding: 10px 20px;
     background-color: var(--input-button-color);

app/styles/output.css

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