ParthSadaria commited on
Commit
1b70dd6
·
verified ·
1 Parent(s): 37622ca

Update playground.html

Browse files
Files changed (1) hide show
  1. 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
- height: 100%;
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: 70px; /* Space for input area */
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;