YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

css multi browser fix trial 1

Browse source
This commit is contained in:
YasinOnm08 2024-10-02 10:24:30 +02:00
parent caa02ee81e
commit 6d71e17e61
5 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/ConversationFrontend.tsx
View file

@ -53,7 +53,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
if (isScrolling) { if (isScrolling) {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
} }
}, [messages]); }, [messages, isScrolling]);
return ( return (
<div className="output" ref={ref}> <div className="output" ref={ref}>

25
app/styles/global.css
View file

@ -4,6 +4,31 @@ body {
position: relative; 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 { body {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);

2
app/styles/input.css
View file

@ -6,7 +6,6 @@
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0; padding-right: 0;
margin: 0 10px; margin: 0 10px;
margin-bottom: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -17,6 +16,7 @@
bottom: 3dvh; bottom: 3dvh;
right: 0.25vw; right: 0.25vw;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
z-index: 600;
} }
.input input { .input input {

4
app/styles/models.css
View file

@ -6,7 +6,6 @@
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
padding-bottom: 1px; padding-bottom: 1px;
overflow: scroll;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
@ -19,6 +18,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
@ -53,7 +53,7 @@
justify-content: center; justify-content: center;
color: var(--text-color); /* Use variable for text color */ color: var(--text-color); /* Use variable for text color */
border-radius: 5%; border-radius: 5%;
overflow: scroll; overflow: hidden;
position: relative; position: relative;
height: 18vh; height: 18vh;
width: 18vh; width: 18vh;

6
app/styles/output.css
View file

@ -6,7 +6,7 @@
background-color: var(--output-background-color); background-color: var(--output-background-color);
margin: 1em; margin: 1em;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 15dvh; padding-bottom: 13dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
@ -73,7 +73,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
z-index: 600; z-index: 900;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {
@ -87,7 +87,7 @@
/* Position the tooltip */ /* Position the tooltip */
position: absolute; position: absolute;
top: 125%; top: 100%;
/* Adjusts tooltip to be below the button */ /* Adjusts tooltip to be below the button */
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);