From 98fb54a1fe30e78ff62b807a736c6bc50f6d86e3 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Fri, 27 Sep 2024 16:48:17 +0200
Subject: [PATCH] css renovation 1

---
 app/components/Header.tsx |  4 ++--
 app/page.tsx              |  2 +-
 app/styles/container.css  |  6 +++---
 app/styles/global.css     |  8 +++++---
 app/styles/header.css     | 10 +++++-----
 app/styles/output.css     |  4 ++++
 6 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 5b74d00..0445db4 100644
--- a/app/components/Header.tsx
+++ b/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>
diff --git a/app/page.tsx b/app/page.tsx
index 0f74ba5..aad4bee 100644
--- a/app/page.tsx
+++ b/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">
diff --git a/app/styles/container.css b/app/styles/container.css
index 53c90a0..89e03fa 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -2,10 +2,8 @@
 .container,
 .content {
     display: flex;
-    height: 100vh;
     width: 100vw;
-    overflow: hidden;
-    position: relative; /* Ensure relative positioning for proper transitions */
+    padding-top: 0.025vh;
 }
 
 .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;
 }
diff --git a/app/styles/global.css b/app/styles/global.css
index 00a246b..8a4eae2 100644
--- a/app/styles/global.css
+++ b/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);
diff --git a/app/styles/header.css b/app/styles/header.css
index 4e5c2f0..5e84cc5 100644
--- a/app/styles/header.css
+++ b/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);
diff --git a/app/styles/output.css b/app/styles/output.css
index 15eadae..255715f 100644
--- a/app/styles/output.css
+++ b/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;
 }