Add max width and height for error alerts

Both collapsed and expanded
Uninett · Jan 22, 2024 · a402544 · a402544
1 parent 3af047b
commit a402544
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/howitz/templates/components/popups/alerts/error/error-alert.html b/src/howitz/templates/components/popups/alerts/error/error-alert.html
@@ -1,19 +1,19 @@
 <div id="error-alert-{{ alert_id }}"
-     class="fixed bottom-6 right-6 z-50 p-1 text-white bg-orange-800 rounded-lg shadow"
+     class="fixed bottom-0 right-0 z-50 p-1 m-6 text-white bg-orange-800 rounded-lg shadow max-h-screen max-w-screen overflow-hidden flex flex-col gap-1 justify-start flex-nowrap items-stretch"
      role="alert"
 >
     <div id="error-msg-{{ alert_id }}-minimized"
-         class="flex justify-between items-center gap-6 w-full max-w-screen h-12 p-3 text-white bg-orange-800">
+         class="flex justify-between items-center gap-6 w-full max-w-screen h-12 p-3 text-white bg-orange-800 shrink-0">
         <div class="flex flex-row no-wrap items-center">
             <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-950 bg-orange-950 rounded-lg">
                 {% include "/components/popups/alerts/error/error-icon.svg" %}
                 <span class="sr-only">Error icon</span>
             </div>
             <div id="short-error-msg-{{ alert_id }}"
-                 class="ms-3 text-sm font-normal text-white">{{ short_err_msg }}</div>
+                 class="ms-3 text-sm font-normal text-white overflow-y-scroll overflow-x-scroll max-h-9">{{ short_err_msg }}</div>
         </div>
 
-        <div>
+        <div class="flex-shrink-0">
             <button id="toggle-error-alert-{{ alert_id }}"
                     type="button"
                     hx-get="/alert/{{ alert_id }}/show-maximized-error"

diff --git a/src/howitz/templates/responses/collapse-error-alert.html b/src/howitz/templates/responses/collapse-error-alert.html
@@ -1,9 +1,3 @@
-{#<div class="text-white bg-orange-700">#}
-{#    <pre>#}
-{#        {{ err_stacktrace }}#}
-{#    </pre>#}
-{#</div>#}
-
 <button id="toggle-error-alert-{{ alert_id }}"
         hx-swap-oob="outerHTML"
         type="button"

diff --git a/src/howitz/templates/responses/expand-error-alert.html b/src/howitz/templates/responses/expand-error-alert.html
@@ -1,4 +1,10 @@
-<div id="error-msg-{{ alert_id }}-maximized" class="rounded-md text-white p-0 m-0 bg-orange-700"><code><pre class="p-4 m-0">{{ err_description }}</pre></code></div>
+<div id="error-msg-{{ alert_id }}-maximized"
+     class="rounded-md text-white p-0 m-3 bg-orange-700 overflow-y-scroll overflow-x-scroll max-h-[calc(100vh-9rem)] max-w-[calc(100vw-5rem)]">
+    <code>
+        <pre class="min-w-full p-4 m-0">{{ err_description }}</pre>
+    </code>
+</div>
+
 
 <button id="toggle-error-alert-{{ alert_id }}"
         hx-swap-oob="outerHTML"