Add initial and max width to main sections in detailed view

Uninett · Jan 22, 2025 · 64e4e4f · 64e4e4f
1 parent 605b38e
commit 64e4e4f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/argus/htmx/static/styles.css b/src/argus/htmx/static/styles.css
@@ -4304,6 +4304,10 @@ details.collapse summary::-webkit-details-marker {
   max-width: 56rem;
 }
 
+.max-w-\[25\%\] {
+  max-width: 25%;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
@@ -4320,8 +4324,8 @@ details.collapse summary::-webkit-details-marker {
   flex-grow: 1;
 }
 
-.border-collapse {
-  border-collapse: collapse;
+.basis-1\/4 {
+  flex-basis: 25%;
 }
 
 .border-separate {

diff --git a/src/argus/htmx/templates/htmx/incident/incident_detail.html b/src/argus/htmx/templates/htmx/incident/incident_detail.html
@@ -4,7 +4,7 @@
     {% block incident_detail %}
       <h1 class="text-xl font-bold">{{ incident.pk }}: {{ incident.description }}</h1>
       <div class="flex gap-4">
-        <section id="incident-detail" class="flex-none">
+        <section id="incident-detail" class="basis-1/4 flex-none">
           <section id="level" class="card">
             <h2 class="card-title">Level</h2>
             <p class="card-body">{{ incident.level }}</p>
@@ -82,7 +82,7 @@ <h3 class="font-bold">Ticket</h3>
             </div>
           </section>
         </section>
-        <section id="acknowledgements" class="card">
+        <section id="acknowledgements" class="basis-1/4 max-w-[25%] card">
           <h2 class="card-title">Acknowledgements</h2>
           <div class="divide-y divide-solid">
             {% for ack in incident.acks %}
@@ -100,7 +100,7 @@ <h2 class="card-title">Acknowledgements</h2>
             </div>
           </div>
         </section>
-        <section id="events" class="card">
+        <section id="events" class="basis-1/4 max-w-[25%] card">
           <h2 class="card-title">Related events</h2>
           <div class="divide-y divide-solid">
             {% for event in incident.events.all %}