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')