From a5c27c22d9da7f7bade912b1b094b0ddcaa9f2f7 Mon Sep 17 00:00:00 2001
From: Adrien <adrien.bouvais.pro@gmail.com>
Date: Sun, 5 May 2024 14:42:04 +0200
Subject: [PATCH] mobile fix

---
 views/chat.html                  | 40 +++++++++++++++-----------------
 views/layouts/main.html          |  1 +
 views/partials/content-bot.html  |  7 ------
 views/partials/message-bot.html  | 17 +++++++-------
 views/partials/message-user.html |  8 +++----
 5 files changed, 32 insertions(+), 41 deletions(-)
 delete mode 100644 views/partials/content-bot.html

diff --git a/views/chat.html b/views/chat.html
index 97e0b1a..c9ed4f6 100644
--- a/views/chat.html
+++ b/views/chat.html
@@ -2,31 +2,29 @@
     <hx hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></hx>
 
 
-    <div class="chat-input-container">
-        <form class="control" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
-            hx-target="#chat-messages" id="chat-input-form" class="chat-input"
-            hx-include="[name='message'], [name^='model-check-']">
-            <div class="textarea-wrapper">
-                <textarea class="textarea" placeholder="Type your message here..." name="message"></textarea>
-                <div class="button-group">
-                    <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
-                    <div class="dropdown is-hoverable is-up">
-                        <div class="dropdown-trigger">
-                            <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
-                                <span>Settings</span>
-                            </button>
-                        </div>
-                        <div class="dropdown-menu" id="dropdown-menu4" role="menu">
-                            <div class="dropdown-content">
-                                <div class="dropdown-item">
-                                    <h5>Hello</h5>
-                                </div>
+    <div class="chat-input-container mb-5">
+        <div class="textarea-wrapper">
+            <textarea class="textarea" placeholder="Type your message here..." name="message"></textarea>
+            <div class="button-group">
+                <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
+                <div class="dropdown is-hoverable is-up">
+                    <div class="dropdown-trigger">
+                        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
+                            <span>Settings</span>
+                        </button>
+                    </div>
+                    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+                        <div class="dropdown-content">
+                            <div class="dropdown-item">
+                                <h5>Hello</h5>
                             </div>
                         </div>
                     </div>
-                    <button type="submit" class="send-button button is-primary is-small">Send</button>
                 </div>
+                <button type="submit" class="send-button button is-primary is-small" hx-post="/requestMultipleMessages"
+                    hx-swap="beforeend settle:200ms" hx-target="#chat-messages" id="chat-input-send-btn"
+                    class="chat-input" hx-include="[name='message'], [name^='model-check-']">Send</button>
             </div>
-        </form>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/views/layouts/main.html b/views/layouts/main.html
index c6e3aa0..7c2b145 100644
--- a/views/layouts/main.html
+++ b/views/layouts/main.html
@@ -30,6 +30,7 @@
 
         .textarea-wrapper {
             position: relative;
+            width: 100%;
         }
 
         .textarea {
diff --git a/views/partials/content-bot.html b/views/partials/content-bot.html
deleted file mode 100644
index 8deb56b..0000000
--- a/views/partials/content-bot.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
-    <div class="message-body">
-        <div class="content">
-            {{ message.Content | safe }}
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/views/partials/message-bot.html b/views/partials/message-bot.html
index 12baaaf..e04bcd9 100644
--- a/views/partials/message-bot.html
+++ b/views/partials/message-bot.html
@@ -1,13 +1,13 @@
 <div class="message-bot mt-3">
-    <div class="columns">
-        <div class="column is-vcentered is-1" id="icon-column">
+    <div class="columns is-mobile">
+        <div class="column is-narrow" id="icon-column">
             <div class='rows'>
                 {% for message in Messages %}
-                <div class='row is-full mt-1 is-vcentered'>
+                <div class='row is-full mt-1'>
                     <a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
                         hx-target="#content-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
-                        <figure class=" image is-48x48 mr-2" style="flex-shrink: 0;">
-                            <img src="icons/{{ message.Icon }}.png" alt="User Image" if {% if message.Hidden %}
+                        <figure class="image is-48x48" style="flex-shrink: 0;">
+                            <img src="icons/{{ message.Icon }}.png" alt="User Image" {% if message.Hidden %}
                                 style="filter: grayscale(100%);" {% endif %}>
                         </figure>
                     </a>
@@ -15,7 +15,7 @@
                 {% endfor %}
                 {% if IsPlaceholder %}
                 <div class='row is-full mt-1'>
-                    <figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
+                    <figure class="image is-48x48" style="flex-shrink: 0;">
                         <img src="icons/bouvai2.png" alt="User Image">
                     </figure>
                 </div>
@@ -23,7 +23,6 @@
             </div>
         </div>
 
-
         <div class="column" id="content-column">
             <div class="is-flex">
                 {% for message in Messages %}
@@ -36,9 +35,9 @@
                         </p>
                     </div>
                     <div class="message-body">
-                        <ct class="content" style="overflow-x: auto;">
+                        <div class="content" style="overflow-x: auto;">
                             {{ message.Content | safe }}
-                        </ct>
+                        </div>
                     </div>
                 </div>
                 {% endif %}
diff --git a/views/partials/message-user.html b/views/partials/message-user.html
index 3c2b061..b4838a8 100644
--- a/views/partials/message-user.html
+++ b/views/partials/message-user.html
@@ -1,7 +1,7 @@
 <div class="message-user mt-3" id="{{ ID }}">
-    <div class="columns is-vcentered">
-        <div class="column is-centered is-1" id="icon-column">
-            <figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
+    <div class="columns is-vcentered is-mobile">
+        <div class="column is-narrow" id="icon-column">
+            <figure class="image is-48x48" style="flex-shrink: 0;">
                 <img src="icons/bouvai2.png" alt="User Image">
             </figure>
         </div>
@@ -10,7 +10,7 @@
             <div class="is-flex">
                 <div class="message-content" style="position: relative; padding-right: 30px;">
                     <div class="message-body">
-                        <div class="content">
+                        <div class="content" style="overflow-x: auto;">
                             {{ Content|safe }}
                         </div>
                     </div>