From bc4ebeff8cf52d1f0ae6390d2294eea7834448f4 Mon Sep 17 00:00:00 2001
From: Late Night Defender <latenightdef@techtransthai.org>
Date: Tue, 27 May 2025 14:49:33 +0700
Subject: [PATCH] make items fit better on small screens

---
 src/App.css | 35 +++++------------------------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/src/App.css b/src/App.css
index dec67f8..bd2156c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -32,12 +32,11 @@ body {
 }
 
 .avatar {
-  width: 200px;
-  height: 200px;
+  width: 5cm;
+  height: 5cm;
   border-radius: 50%;
   border: 4px solid white;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  object-fit: cover;
   animation: popIn 0.4s ease;
 }
 
@@ -45,14 +44,14 @@ body {
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid #d1d5db;
   border-radius: 1.5rem;
-  padding: 1.5rem;
+  padding: 1rem;
   margin-top: 1.5rem;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   animation: fadeIn 0.5s ease-in-out;
 }
 
 .dialogue-text {
-  font-size: 18pt;
+  font-size: 16pt;
   color: #374151;
   margin-bottom: 1rem;
 }
@@ -73,7 +72,7 @@ body {
   font-weight: 700;
   color: white;
   width: 8cm;
-  height: 3cm;
+  height: 2cm;
   border: none;
   border-radius: 9999px;
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
@@ -92,30 +91,6 @@ body {
   background-color: #2563eb;
 }
 
-.recording-indicator {
-  color: red;
-  font-weight: bold;
-  margin-top: 1rem;
-  text-align: center;
-  animation: pulse 1s infinite;
-}
-
-.waveform-canvas {
-  width: 300px; /* same as element width */
-  height: 60px; /* same as element height */
-  background-color: #000;
-  border-radius: 8px;
-  margin: 10px auto;
-  display: block;
-}
-
-
-
-@keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.3; }
-  100% { opacity: 1; }
-}
 
 @keyframes fadeIn {
   from {