Spaces:
Running
Running
Update playground.html
Browse files- playground.html +31 -3
playground.html
CHANGED
@@ -207,11 +207,25 @@
|
|
207 |
border-radius: 15px;
|
208 |
}
|
209 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
210 |
.chat-container {
|
211 |
display: none;
|
212 |
flex-direction: column;
|
213 |
-
|
214 |
position: relative;
|
|
|
215 |
}
|
216 |
|
217 |
.chat-messages {
|
@@ -224,12 +238,11 @@
|
|
224 |
background-color: var(--bg-dark);
|
225 |
font-family: 'JetBrains Mono', monospace;
|
226 |
overscroll-behavior: contain;
|
227 |
-
max-height: calc(90vh - 120px); /* Adjust based on header and input height */
|
228 |
position: absolute;
|
229 |
top: 0;
|
230 |
left: 0;
|
231 |
right: 0;
|
232 |
-
bottom:
|
233 |
}
|
234 |
|
235 |
.chat-input {
|
@@ -245,6 +258,21 @@
|
|
245 |
z-index: 10;
|
246 |
}
|
247 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
248 |
.message {
|
249 |
max-width: 80%;
|
250 |
width: fit-content;
|
|
|
207 |
border-radius: 15px;
|
208 |
}
|
209 |
|
210 |
+
.chat-wrapper {
|
211 |
+
position: relative;
|
212 |
+
width: 100%;
|
213 |
+
max-width: 800px;
|
214 |
+
height: 90vh;
|
215 |
+
background-color: var(--bg-darker);
|
216 |
+
border-radius: 24px;
|
217 |
+
overflow: hidden;
|
218 |
+
box-shadow: 0 20px 50px rgba(5, 5, 10, 0.7);
|
219 |
+
display: flex;
|
220 |
+
flex-direction: column;
|
221 |
+
}
|
222 |
+
|
223 |
.chat-container {
|
224 |
display: none;
|
225 |
flex-direction: column;
|
226 |
+
flex: 1;
|
227 |
position: relative;
|
228 |
+
overflow: hidden;
|
229 |
}
|
230 |
|
231 |
.chat-messages {
|
|
|
238 |
background-color: var(--bg-dark);
|
239 |
font-family: 'JetBrains Mono', monospace;
|
240 |
overscroll-behavior: contain;
|
|
|
241 |
position: absolute;
|
242 |
top: 0;
|
243 |
left: 0;
|
244 |
right: 0;
|
245 |
+
bottom: 80px; /* Space for input area */
|
246 |
}
|
247 |
|
248 |
.chat-input {
|
|
|
258 |
z-index: 10;
|
259 |
}
|
260 |
|
261 |
+
/* Custom Scrollbar for Chat Messages */
|
262 |
+
.chat-messages::-webkit-scrollbar {
|
263 |
+
width: 8px;
|
264 |
+
}
|
265 |
+
|
266 |
+
.chat-messages::-webkit-scrollbar-track {
|
267 |
+
background: transparent;
|
268 |
+
}
|
269 |
+
|
270 |
+
.chat-messages::-webkit-scrollbar-thumb {
|
271 |
+
background-color: var(--primary-blue);
|
272 |
+
border-radius: 20px;
|
273 |
+
}
|
274 |
+
}
|
275 |
+
|
276 |
.message {
|
277 |
max-width: 80%;
|
278 |
width: fit-content;
|