From d40d4fb9c16febc7b92f957e5526e55d2ae4f9f8 Mon Sep 17 00:00:00 2001
From: Caleb <57644769+alliraine@users.noreply.github.com>
Date: Fri, 16 May 2025 19:30:27 -0400
Subject: [PATCH] Fix alignment for analysis views

---
 .../src/lib/components/AnalysisTable.svelte   | 28 +++++++++----------
 .../src/lib/components/AnalysisView.svelte    |  4 +--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/bin/web/src/lib/components/AnalysisTable.svelte b/bin/web/src/lib/components/AnalysisTable.svelte
index da1dbf8..db96239 100644
--- a/bin/web/src/lib/components/AnalysisTable.svelte
+++ b/bin/web/src/lib/components/AnalysisTable.svelte
@@ -30,12 +30,12 @@
     {#if report.statistics.num_warnings === 0 && report.statistics.num_informational_logs === 0}
         <p>Nothing to show!</p>
     {:else}
-        <table class="table-auto text-left border">
+        <table class="table-auto text-left">
             <thead class="p-2">
                 <tr class="bg-gray-300">
-                    <th scope="col">Timestamp</th>
-                    <th scope="col">Warning</th>
-                    <th scope="col">Severity</th>
+                    <th class="p-2">Timestamp</th>
+                    <th class="p-2">Warning</th>
+                    <th class="p-2">Severity</th>
                 </tr>
             </thead>
             <tbody>
@@ -43,15 +43,15 @@
                     {#each row.analysis as analysis}
                         {@const parsed_date = new Date(analysis.timestamp)}
                         {#each analysis.events.filter(e => e !== null) as event}
-                            <tr class="even:bg-gray-200 border-b">
+                            <tr class="even:bg-gray-200 odd:bg-white">
                             {#if event.type === EventType.Warning}
-                                {@const severity = ['Low', 'Medium', 'High'][event.severity]}
+                            {@const severity = ['Low', 'Medium', 'High'][event.severity]}
                                 {@const severity_class = ['bg-red-200', 'bg-red-400', 'bg-red-600'][event.severity]}
-                                <th class="p-2">{date_formatter.format(parsed_date)}</th>
+                                <td class="p-2">{date_formatter.format(parsed_date)}</td>
                                 <td class="p-2">{event.message}</td>
-                                <td class="p-2 {severity_class}">{severity}</td>
+                                <td class="p-2 {severity_class} text-center">{severity}</td>
                             {:else if event.type === EventType.Informational}
-                                <th class="p-2">{date_formatter.format(parsed_date)}</th>
+                                <td class="p-2">{date_formatter.format(parsed_date)}</td>
                                 <td class="p-2">{event.message}</td>
                                 <td class="p-2">Info</td>
                             {/if}
@@ -64,20 +64,20 @@
     {/if}
 </div>
 {#if report.statistics.num_skipped_packets > 0}
-    <div>
+    <div class="flex flex-col flex-1">
         <p class="text-lg underline">Unparsed Messages</p>
         <p>These are due to a limitation or bug in Rayhunter's parser, and aren't ususally a problem.</p>
-        <table class="table-auto text-left border">
+        <table class="table-auto text-left">
             <thead class="p-2">
                 <tr class="bg-gray-300">
-                    <th scope="col"># of messages affected</th>
+                    <th scope="col" class="p-2"># of messages affected</th>
                     <th scope="col">Reason/Error</th>
                 </tr>
             </thead>
             <tbody>
                 {#each skipped_messages.entries() as [message, count]}
-                    <tr class="even:bg-gray-200 border-b">
-                        <td>{count}</td>
+                    <tr class="even:bg-gray-200 odd:bg-white">
+                        <td class="text-center">{count}</td>
                         <td>{message}</td>
                     </tr>
                 {/each}
diff --git a/bin/web/src/lib/components/AnalysisView.svelte b/bin/web/src/lib/components/AnalysisView.svelte
index 2715469..0462f90 100644
--- a/bin/web/src/lib/components/AnalysisView.svelte
+++ b/bin/web/src/lib/components/AnalysisView.svelte
@@ -13,14 +13,14 @@
     });
 </script>
 
-<div class="container">
+<div class="container mt-2">
     {#if entry.analysis_report === undefined}
         <p>Report unavailable, try refreshing.</p>
     {:else if typeof(entry.analysis_report) === 'string'}
         <p>Error getting analysis report: {entry.analysis_report}</p>
     {:else}
         {@const metadata: ReportMetadata = entry.analysis_report.metadata}
-        <div class="flex flex-col gap-2 my-2 lg:my-4">
+        <div class="flex flex-col gap-2">
             {#if entry.analysis_report.rows.length > 0}
                 <AnalysisTable report={entry.analysis_report} />
             {:else}