From caa02ee81e5b6496e05abcfce89f6f0e7aff82d0 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 2 Oct 2024 09:55:09 +0200
Subject: [PATCH 1/2] icons clipping fix
---
app/styles/output.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/styles/output.css b/app/styles/output.css
index 2bd949d..20318fa 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -73,7 +73,7 @@
position: relative;
display: inline-block;
cursor: pointer;
- z-index: 999;
+ z-index: 600;
}
.tooltip .tooltiptext {
From 6d71e17e61c4e944da73a531a252e135eb69364a Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 2 Oct 2024 10:24:30 +0200
Subject: [PATCH 2/2] css multi browser fix trial 1
---
app/components/ConversationFrontend.tsx | 2 +-
app/styles/global.css | 25 +++++++++++++++++++++++++
app/styles/input.css | 2 +-
app/styles/models.css | 4 ++--
app/styles/output.css | 6 +++---
5 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index 832104b..b294b01 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
if (isScrolling) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}
- }, [messages]);
+ }, [messages, isScrolling]);
return (
<div className="output" ref={ref}>
diff --git a/app/styles/global.css b/app/styles/global.css
index 0acb073..e3d771c 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -4,6 +4,31 @@ body {
position: relative;
}
+/* Chrome, Edge, and Safari */
+::-webkit-scrollbar {
+ width: 12px;
+ /* Adjust width for horizontal and vertical scrollbars */
+}
+
+::-webkit-scrollbar-track {
+ background: #f0f0f0;
+ /* Background of the scrollbar track */
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #888;
+ /* Color of the draggable part (thumb) */
+ border-radius: 10px;
+ /* Rounded corners */
+ border: 2px solid #f0f0f0;
+ /* Space around the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: #555;
+ /* Thumb color on hover */
+}
+
body {
background-color: var(--background-color);
color: var(--text-color);
diff --git a/app/styles/input.css b/app/styles/input.css
index 3233b14..dad1d56 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -6,7 +6,6 @@
padding-left: 0.5em;
padding-right: 0;
margin: 0 10px;
- margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -17,6 +16,7 @@
bottom: 3dvh;
right: 0.25vw;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
+ z-index: 600;
}
.input input {
diff --git a/app/styles/models.css b/app/styles/models.css
index ccd49c6..258f71a 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -6,7 +6,6 @@
grid-column: 1/2;
grid-row: 1/2;
padding-bottom: 1px;
- overflow: scroll;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
@@ -19,6 +18,7 @@
display: flex;
flex-direction: column;
height: 100%;
+ overflow: hidden;
overflow-y: scroll;
}
@@ -53,7 +53,7 @@
justify-content: center;
color: var(--text-color); /* Use variable for text color */
border-radius: 5%;
- overflow: scroll;
+ overflow: hidden;
position: relative;
height: 18vh;
width: 18vh;
diff --git a/app/styles/output.css b/app/styles/output.css
index 20318fa..2a4fe50 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -6,7 +6,7 @@
background-color: var(--output-background-color);
margin: 1em;
margin-bottom: 0;
- padding-bottom: 15dvh;
+ padding-bottom: 13dvh;
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -73,7 +73,7 @@
position: relative;
display: inline-block;
cursor: pointer;
- z-index: 600;
+ z-index: 900;
}
.tooltip .tooltiptext {
@@ -87,7 +87,7 @@
/* Position the tooltip */
position: absolute;
- top: 125%;
+ top: 100%;
/* Adjusts tooltip to be below the button */
left: 50%;
transform: translateX(-50%);