From 0d9932815c593fd425e25c4c9dff69005d1df95e Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Wed, 2 Aug 2023 08:45:14 -0700
Subject: [PATCH] Improve TheEncrypted777 on mobile devices

---
 css/chat.css                       | 10 +++++++
 css/chat_style-TheEncrypted777.css | 45 ++++++++++++++++++++++++------
 css/main.css                       |  6 ++++
 server.py                          |  2 +-
 4 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/css/chat.css b/css/chat.css
index 17b8d142..ad76f5cc 100644
--- a/css/chat.css
+++ b/css/chat.css
@@ -46,6 +46,16 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     min-width: 0 !important;
 }
 
+@media screen and (max-width: 688px) {
+    #main {
+        padding: 0px;
+    }
+
+    .chat {
+        height: calc(100vh - 274px) !important;
+    }
+}
+
 /*****************************************************/
 /*************** Chat box declarations ***************/
 /*****************************************************/
diff --git a/css/chat_style-TheEncrypted777.css b/css/chat_style-TheEncrypted777.css
index 7682011d..d92e982d 100644
--- a/css/chat_style-TheEncrypted777.css
+++ b/css/chat_style-TheEncrypted777.css
@@ -10,17 +10,10 @@
     line-height: 1.428571429;
 }
 
-.circle-you {
-    background-color: gray;
-    border-radius: 1rem;
-    /*Change color to any you like to be the border of your image*/
-    border: 2px solid white;
-}
-
+.circle-you,
 .circle-bot {
     background-color: gray;
     border-radius: 1rem;
-    /*Change color to any you like to be the border of the bot's image*/
     border: 2px solid white;
 }
 
@@ -105,3 +98,39 @@
 .message-body p em {
     color: rgb(110, 110, 110) !important;
 }
+
+@media screen and (max-width: 688px) {
+    .message {
+        display: grid;
+        grid-template-columns: 60px minmax(0, 1fr);
+        padding-bottom: 25px;
+        font-size: 15px;
+        font-family: Helvetica, Arial, sans-serif;
+        line-height: 1.428571429;
+    }
+
+    .circle-you, .circle-bot {
+        width: 50px;
+        height: 73px;
+        border-radius: 0.5rem;
+    }
+
+    .circle-bot img,
+    .circle-you img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .text {
+        padding-left: 0px;
+    }
+
+    .message-body p {
+        font-size: 16px !important;
+    }
+
+    .username {
+        font-size: 20px;
+    }
+}
diff --git a/css/main.css b/css/main.css
index 5c17a179..b4066c91 100644
--- a/css/main.css
+++ b/css/main.css
@@ -26,6 +26,10 @@
     max-width: 2.2em;
 }
 
+.button_nowrap {
+    white-space: nowrap;
+}
+
 #slim-column {
     flex: none !important;
     min-width: 0 !important;
@@ -90,6 +94,8 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
 .header_bar {
     background-color: #f7f7f7;
     margin-bottom: 20px;
+    display: inline !important;
+    overflow-x: scroll;
 }
 
 .dark .header_bar {
diff --git a/server.py b/server.py
index ecb8ddc9..0f1b9332 100644
--- a/server.py
+++ b/server.py
@@ -643,7 +643,7 @@ def create_interface():
                 with gr.Row():
                     shared.gradio['Impersonate'] = gr.Button('Impersonate')
                     shared.gradio['Regenerate'] = gr.Button('Regenerate')
-                    shared.gradio['Remove last'] = gr.Button('Remove last')
+                    shared.gradio['Remove last'] = gr.Button('Remove last', elem_classes=['button_nowrap'])
 
                 with gr.Row():
                     shared.gradio['Copy last reply'] = gr.Button('Copy last reply')