mobile fix

views/partials/content-bot.html

@@ -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>

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 %}

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>