From aff3ec5be0867639ac2f73d4faf05d0461bb4f5a Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Tue, 9 Apr 2024 20:19:46 +0200
Subject: Improve styling mobile

---
 README.md                           |  2 +-
 g4f/gui/client/static/css/style.css | 13 ++++++++++---
 g4f/gui/client/static/js/chat.v1.js |  4 +++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 83d5a45e..eba4ce4b 100644
--- a/README.md
+++ b/README.md
@@ -189,7 +189,7 @@ image_url = response.data[0].url
 **Full Documentation for Python API**
 
 - New AsyncClient API from G4F: [/docs/async_client](/docs/async_client.md)
-- Client API like the OpenAI Python library: [/docs/client](/docs/async_client.md)
+- Client API like the OpenAI Python library: [/docs/client](/docs/client.md)
 - Legacy API with python modules: [/docs/legacy](/docs/legacy.md)
 
 #### Web UI
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index faecda9f..32fff3db 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -239,6 +239,7 @@ body {
     width: 100%;
     overflow-wrap: break-word;
     display: flex;
+    flex-direction: column;
     gap: var(--section-gap);
     padding: var(--inner-gap) var(--section-gap);
     padding-bottom: 0;
@@ -589,7 +590,7 @@ label[for="camera"] {
 }
 
 .settings .bottom_buttons {
-    flex-direction: row;
+    flex-direction: column;
 }
 
 .settings .bottom_buttons button {
@@ -652,6 +653,12 @@ select {
     .field {
         padding-right: 15px
     }
+    .message {
+        flex-direction: row;
+    }
+    .settings .bottom_buttons {
+        flex-direction: row;
+    }
 }
 
 .input-box {
@@ -1070,7 +1077,6 @@ a:-webkit-any-link {
 
 .settings {
     width: 100%;
-    min-width: 700px;
     display: flex;
     flex-direction: column;
 }
@@ -1078,6 +1084,7 @@ a:-webkit-any-link {
 .settings .paper {
     overflow: auto;
     flex-direction: column;
+    min-width: 400px;
 }
 
 .settings .field {
@@ -1135,7 +1142,7 @@ a:-webkit-any-link {
 }
 
 #message-input {
-    height: 82px;
+    height: 90px;
     margin-left: 20px;
     max-height: 200px;
 }
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 02437bf7..5036a93b 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -96,10 +96,12 @@ const register_message_buttons = async () => {
             el.dataset.click = "true";
             el.addEventListener("click", async () => {
                 if ("active" in el.classList || window.doSpeech) {
+                    el.classList.add("blink")
                     stopped = true;
                     return;
                 }
                 if (stopped) {
+                    el.classList.remove("blink")
                     stopped = false;
                     return;
                 }
@@ -125,7 +127,7 @@ const register_message_buttons = async () => {
                         sound.controls = 'controls';
                         sound.src = url;
                         sound.type = 'audio/wav';
-                        if (ended) {
+                        if (ended && !stopped) {
                             sound.autoplay = true;
                         }
                         sound.onended = function() {
-- 
cgit v1.2.3