From a6af3bacdd26cb15e26aff5d906d0b35865f52ef Mon Sep 17 00:00:00 2001
From: James Paul Turner <james.turner@imperial.ac.uk>
Date: Wed, 9 Oct 2024 12:33:10 +0100
Subject: [PATCH] Add messages hide button.

---
 .../templates/process_manager/index.html      | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/process_manager/templates/process_manager/index.html b/process_manager/templates/process_manager/index.html
index c7487f8..ea2cf0f 100644
--- a/process_manager/templates/process_manager/index.html
+++ b/process_manager/templates/process_manager/index.html
@@ -4,10 +4,13 @@
 {% endblock title %}
 {% block extra_css %}
   <style>
-  .card-body {
-    max-height: 85vh;
-    overflow-y: auto;
-  }
+    #message-hide {
+      float: right;
+    }
+    #message-list {
+      max-height: 85vh;
+      overflow-y: auto;
+    }
   </style>
 {% endblock extra_css %}
 {% block content %}
@@ -37,10 +40,17 @@
              hx-trigger="load"></div>
       </form>
     </div>
-    <div class="col">
+    <div class="col" id="message-panel">
       <div class="card">
-        <div class="card-header">Messages</div>
-        <div class="card-body">
+        <div class="card-header">
+          Messages
+          <button class="btn-close"
+                  id="message-hide"
+                  type="button"
+                  aria-label="Close"
+                  _="on click hide #message-panel"></button>
+        </div>
+        <div class="card-body" id="message-list">
           <ul class="list-group">
             {% if messages %}
               {% for message in messages %}<li class="list-group-item">{{ message }}</li>{% endfor %}