Spaces:
Sleeping
Sleeping
matt HOFFNER
commited on
Commit
·
18648c5
1
Parent(s):
fc7da9f
updates
Browse files- app/input.tsx +1 -1
- app/layout.tsx +3 -0
- app/page.module.css +7 -51
app/input.tsx
CHANGED
|
@@ -204,7 +204,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
|
|
| 204 |
};
|
| 205 |
|
| 206 |
return (
|
| 207 |
-
<div>
|
| 208 |
{transcriber.progressItems.length > 0 && (
|
| 209 |
<div>
|
| 210 |
<label>
|
|
|
|
| 204 |
};
|
| 205 |
|
| 206 |
return (
|
| 207 |
+
<div className={styles.inputContainer}>
|
| 208 |
{transcriber.progressItems.length > 0 && (
|
| 209 |
<div>
|
| 210 |
<label>
|
app/layout.tsx
CHANGED
|
@@ -16,6 +16,9 @@ export default function RootLayout({
|
|
| 16 |
}) {
|
| 17 |
return (
|
| 18 |
<html lang="en">
|
|
|
|
|
|
|
|
|
|
| 19 |
<body className={inter.className}>{children}</body>
|
| 20 |
</html>
|
| 21 |
)
|
|
|
|
| 16 |
}) {
|
| 17 |
return (
|
| 18 |
<html lang="en">
|
| 19 |
+
<head>
|
| 20 |
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
| 21 |
+
</head>
|
| 22 |
<body className={inter.className}>{children}</body>
|
| 23 |
</html>
|
| 24 |
)
|
app/page.module.css
CHANGED
|
@@ -295,28 +295,10 @@
|
|
| 295 |
}
|
| 296 |
|
| 297 |
.messages {
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
justify-content: flex-end; /* Aligns messages to the bottom */
|
| 301 |
-
max-height: 80vh; /* Adjust the percentage as needed */
|
| 302 |
-
overflow-y: auto; /* Allows scrolling if content exceeds container height */
|
| 303 |
-
padding: 25px;
|
| 304 |
border-radius: 10px;
|
| 305 |
-
|
| 306 |
-
}
|
| 307 |
-
|
| 308 |
-
/* Responsive adjustments */
|
| 309 |
-
@media (max-width: 768px) {
|
| 310 |
-
.messages {
|
| 311 |
-
max-height: 70vh; /* More space for smaller screens */
|
| 312 |
-
}
|
| 313 |
-
}
|
| 314 |
-
|
| 315 |
-
/* Further adjustments can be made for smaller screens */
|
| 316 |
-
@media (max-width: 480px) {
|
| 317 |
-
.messages {
|
| 318 |
-
max-height: 60vh;
|
| 319 |
-
}
|
| 320 |
}
|
| 321 |
|
| 322 |
.message {
|
|
@@ -329,7 +311,6 @@
|
|
| 329 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
| 330 |
color: #333;
|
| 331 |
overflow: hidden; /* Prevents text from overflowing */
|
| 332 |
-
gap: 20px; /* Space between avatar and text */
|
| 333 |
}
|
| 334 |
|
| 335 |
.message-content {
|
|
@@ -413,38 +394,13 @@
|
|
| 413 |
.avatar {
|
| 414 |
display: inline-block;
|
| 415 |
vertical-align: middle;
|
| 416 |
-
|
|
|
|
|
|
|
|
|
|
| 417 |
}
|
| 418 |
|
| 419 |
@keyframes moveClouds {
|
| 420 |
0% { background-position: 0 0; }
|
| 421 |
100% { background-position: 1000px 500px; }
|
| 422 |
-
}
|
| 423 |
-
|
| 424 |
-
.message-content-container {
|
| 425 |
-
flex: 1;
|
| 426 |
-
padding-left: 10px; /* Adjust as necessary */
|
| 427 |
-
overflow: hidden; /* Prevents overflow */
|
| 428 |
-
}
|
| 429 |
-
|
| 430 |
-
.message-content {
|
| 431 |
-
word-break: break-word; /* Ensures long words don't cause overflow */
|
| 432 |
-
}
|
| 433 |
-
|
| 434 |
-
@media (max-width: 768px) {
|
| 435 |
-
.message-content-container {
|
| 436 |
-
padding-left: 5px; /* Smaller padding for smaller screens */
|
| 437 |
-
}
|
| 438 |
-
}
|
| 439 |
-
|
| 440 |
-
@media (max-width: 768px) {
|
| 441 |
-
.message-text {
|
| 442 |
-
margin-right: 5px;
|
| 443 |
-
}
|
| 444 |
-
}
|
| 445 |
-
|
| 446 |
-
.message-text {
|
| 447 |
-
flex-grow: 1;
|
| 448 |
-
overflow-wrap: break-word;
|
| 449 |
-
margin-right: 10px; /* Adjust as necessary */
|
| 450 |
}
|
|
|
|
| 295 |
}
|
| 296 |
|
| 297 |
.messages {
|
| 298 |
+
flex: 1;
|
| 299 |
+
border: 8px solid transparent;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 300 |
border-radius: 10px;
|
| 301 |
+
padding: 25px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 302 |
}
|
| 303 |
|
| 304 |
.message {
|
|
|
|
| 311 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
| 312 |
color: #333;
|
| 313 |
overflow: hidden; /* Prevents text from overflowing */
|
|
|
|
| 314 |
}
|
| 315 |
|
| 316 |
.message-content {
|
|
|
|
| 394 |
.avatar {
|
| 395 |
display: inline-block;
|
| 396 |
vertical-align: middle;
|
| 397 |
+
width: 40px;
|
| 398 |
+
|
| 399 |
+
|
| 400 |
+
margin-right: 10px;
|
| 401 |
}
|
| 402 |
|
| 403 |
@keyframes moveClouds {
|
| 404 |
0% { background-position: 0 0; }
|
| 405 |
100% { background-position: 1000px 500px; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 406 |
}
|