improve style of large error messages

sni · Feb 12, 2025 · db6dd58 · db6dd58
1 parent d84d5a2
commit db6dd58
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/root/thruk/javascript/thruk-3.20.2.js b/root/thruk/javascript/thruk-3.20.2.js
@@ -4231,7 +4231,7 @@ function thruk_message(rc, message, close_timeout) {
     }
     html += ''
         + '    </div>'
-        + '    <div class="flex-grow text-center font-semibold whitespace-nowrap">'
+        + '    <div class="flex-grow text-center font-semibold whitespace-nowrap overflow-scroll">'
         + '      <span class="' + cls + '">' + message
         + '      </span>';
 
@@ -4250,7 +4250,7 @@ function thruk_message(rc, message, close_timeout) {
     if(lines.length > 0) {
         html += ''
             + '    <div class="w-full flex justify-center">'
-            + '      <pre class="'+cls+'" style="display:none;" id="message_details">'
+            + '      <pre class="'+cls+' max-w-full overflow-scroll" style="display:none;" id="message_details">'
             + lines.join("\n") // joining with <br> breaks html output returned from server actions
             + '      </pre>'
             + '    </div>';

diff --git a/templates/_message.tt b/templates/_message.tt
@@ -8,7 +8,7 @@
     <div class="w-5">
       [% IF message.0 == 'fail_message' %]<i class="fa-solid fa-exclamation round small yellow ml-2" title="Errors detected"></i>[% END %]
     </div>
-    <div class="flex-grow text-center font-semibold whitespace-nowrap">
+    <div class="flex-grow text-center font-semibold whitespace-nowrap overflow-scroll">
       <span class="[% message.0 | html %]">[% message.1 %]</span>
       [% IF message.2 && thruk_message_details.size > 1 %]
         <div class="mt-1"><a class="link" href="#" onclick="showElement('message_details'); hideElement(this.parentNode); window.clearInterval(thruk_message_fade_timer); return false;">show details...</a></div>
@@ -21,7 +21,7 @@
 
   [% IF message.2 %]
     <div class="w-full flex justify-center">
-      <pre class="[% message.0 | html %] overflow-scroll" style="[% IF thruk_message_details.size > 1 %]display:none;[% END %]" id="message_details">
+      <pre class="[% message.0 | html %] max-w-full overflow-scroll" style="[% IF thruk_message_details.size > 1 %]display:none;[% END %]" id="message_details">
 [%- FOREACH detail = thruk_message_details -%][%- detail.trim %]
 [% END -%]
       </pre>

diff --git a/themes/base.css b/themes/base.css
@@ -1841,6 +1841,6 @@ BODY.minimal3 {
 #thruk_message {
   @apply card shadow-float absolute p-1 z-[100] min-w-full lg:min-w-[600px] max-w-[80vw] top-14 left-1/2 transform -translate-x-1/2;
   >DIV {
-    @apply flexrow flex-nowrap gap-2 justify-center;
+    @apply flexrow flex-nowrap gap-2 justify-center max-w-full overflow-scroll;
   }
 }