From ace325a38a54c8a288322a90e00d3b5b0ae279b1 Mon Sep 17 00:00:00 2001
From: Caleb <57644769+alliraine@users.noreply.github.com>
Date: Fri, 16 May 2025 12:11:12 -0400
Subject: [PATCH] Fix alignment of Analysis view

---
 .../src/lib/components/AnalysisTable.svelte   | 107 +++++++++---------
 .../src/lib/components/AnalysisView.svelte    |  24 ++--
 .../src/lib/components/ManifestCard.svelte    |  23 ++--
 .../src/lib/components/ManifestTable.svelte   |   2 +-
 4 files changed, 83 insertions(+), 73 deletions(-)

diff --git a/bin/web/src/lib/components/AnalysisTable.svelte b/bin/web/src/lib/components/AnalysisTable.svelte
index e1b6f13..da1dbf8 100644
--- a/bin/web/src/lib/components/AnalysisTable.svelte
+++ b/bin/web/src/lib/components/AnalysisTable.svelte
@@ -25,60 +25,63 @@
         return map;
     });
 </script>
-
-<p class="text-lg underline">Warnings and Informational Logs</p>
-{#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">
-        <thead class="p-2">
-            <tr class="bg-gray-300">
-                <th scope="col">Timestamp</th>
-                <th scope="col">Warning</th>
-                <th scope="col">Severity</th>
-            </tr>
-        </thead>
-        <tbody>
-            {#each report.rows as row, row_idx}
-                {#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">
-                        {#if event.type === EventType.Warning}
-                            {@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">{event.message}</td>
-                            <td class="p-2 {severity_class}">{severity}</td>
-                        {:else if event.type === EventType.Informational}
-                            <th class="p-2">{date_formatter.format(parsed_date)}</th>
-                            <td class="p-2">{event.message}</td>
-                            <td class="p-2">Info</td>
-                        {/if}
-                        </tr>
+<div>
+    <p class="text-lg underline">Warnings and Informational Logs</p>
+    {#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">
+            <thead class="p-2">
+                <tr class="bg-gray-300">
+                    <th scope="col">Timestamp</th>
+                    <th scope="col">Warning</th>
+                    <th scope="col">Severity</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each report.rows as row, row_idx}
+                    {#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">
+                            {#if event.type === EventType.Warning}
+                                {@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">{event.message}</td>
+                                <td class="p-2 {severity_class}">{severity}</td>
+                            {:else if event.type === EventType.Informational}
+                                <th class="p-2">{date_formatter.format(parsed_date)}</th>
+                                <td class="p-2">{event.message}</td>
+                                <td class="p-2">Info</td>
+                            {/if}
+                            </tr>
+                        {/each}
                     {/each}
                 {/each}
-            {/each}
-        </tbody>
-    </table>
-{/if}
+            </tbody>
+        </table>
+    {/if}
+</div>
 {#if report.statistics.num_skipped_packets > 0}
-    <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">
-        <thead class="p-2">
-            <tr class="bg-gray-300">
-                <th scope="col"># 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>
-                    <td>{message}</td>
+    <div>
+        <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">
+            <thead class="p-2">
+                <tr class="bg-gray-300">
+                    <th scope="col"># of messages affected</th>
+                    <th scope="col">Reason/Error</th>
                 </tr>
-            {/each}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                {#each skipped_messages.entries() as [message, count]}
+                    <tr class="even:bg-gray-200 border-b">
+                        <td>{count}</td>
+                        <td>{message}</td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
 {/if}
diff --git a/bin/web/src/lib/components/AnalysisView.svelte b/bin/web/src/lib/components/AnalysisView.svelte
index 69b6ca1..2715469 100644
--- a/bin/web/src/lib/components/AnalysisView.svelte
+++ b/bin/web/src/lib/components/AnalysisView.svelte
@@ -20,25 +20,27 @@
         <p>Error getting analysis report: {entry.analysis_report}</p>
     {:else}
         {@const metadata: ReportMetadata = entry.analysis_report.metadata}
-        <div class="flex flex-col pl-2 pr-10 w-full">
+        <div class="flex flex-col gap-2 my-2 lg:my-4">
             {#if entry.analysis_report.rows.length > 0}
                 <AnalysisTable report={entry.analysis_report} />
             {:else}
                 <p>No warnings to display!</p>
             {/if}
+            {#if metadata !== undefined && metadata.rayhunter !== undefined}
             <div>
                 <p class="text-lg underline">Metadata</p>
-                {#if metadata !== undefined && metadata.rayhunter !== undefined}
-                    <p>Analysis by Rayhunter version {metadata.rayhunter.rayhunter_version}</p>
-                    <p><b>Device system OS:</b> {metadata.rayhunter.system_os}</p>
-                    <p class="text-lg underline">Analyzers</p>
-                    {#each metadata.analyzers as analyzer}
-                        <p><b>{analyzer.name}:</b> {analyzer.description}</p>
-                    {/each}
-                {:else}
-                    <p>N/A (analysis generated by an older version of rayhunter)</p>
-                {/if}
+                <p>Analysis by Rayhunter version {metadata.rayhunter.rayhunter_version}</p>
+                <p><b>Device system OS:</b> {metadata.rayhunter.system_os}</p>
             </div>
+            <div>
+                <p class="text-lg underline">Analyzers</p>
+                {#each metadata.analyzers as analyzer}
+                    <p><b>{analyzer.name}:</b> {analyzer.description}</p>
+                {/each}
+            </div>
+            {:else}
+                <p>N/A (analysis generated by an older version of rayhunter)</p>
+            {/if}
         </div>
     {/if}
 </div>
diff --git a/bin/web/src/lib/components/ManifestCard.svelte b/bin/web/src/lib/components/ManifestCard.svelte
index 06117f4..6d27974 100644
--- a/bin/web/src/lib/components/ManifestCard.svelte
+++ b/bin/web/src/lib/components/ManifestCard.svelte
@@ -30,13 +30,20 @@
     }
 </script>
 <div class="{status_row_color} drop-shadow p-4 flex flex-col gap-2">
-    <div class="flex flex-row justify-between">
-        <span class="">Name: {entry.name}</span>
-        <span class=""><AnalysisStatus onclick={toggle_analysis_visibility} entry={entry} /></span>
+    {#if current}
+        <span class="text-2xl font-bold mb-2">Current Recording</span>
+    {/if}
+    <div class="flex flex-col">
+        <div class="flex flex-row justify-between">
+            <span class="font-bold">ID: {entry.name}</span>
+            <span class=""><AnalysisStatus onclick={toggle_analysis_visibility} entry={entry} /></span>
+        </div>
+        <span class="">{entry.qmdl_size_bytes} bytes</span>
+    </div>
+    <div class="flex flex-col">
+        <span class="">Start: {date_formatter.format(entry.start_time)}</span>
+        <span class="">Last Message: {date_formatter.format(entry.last_message_time)}</span>
     </div>
-    <span class="">Started: {date_formatter.format(entry.start_time)}</span>
-    <span class="">Last Message: {date_formatter.format(entry.last_message_time)}</span>
-    <span class="">Size: {entry.qmdl_size_bytes} bytes</span>
     <div class="flex flex-row justify-between mt-2">
         <DownloadLink url={entry.get_pcap_url()} text="pcap" full_button=true />
         <DownloadLink url={entry.get_qmdl_url()} text="qmdl" full_button=true />
@@ -50,8 +57,6 @@
         {/if}
     </div>
     <div class="border-b {analysis_visible ? '' : 'hidden'}">
-        <div class="border-t border-dashed p-2" colspan="8">
-            <AnalysisView {entry} />
-        </div>
+        <AnalysisView {entry} />
     </div>
 </div>
diff --git a/bin/web/src/lib/components/ManifestTable.svelte b/bin/web/src/lib/components/ManifestTable.svelte
index 05d6f48..daf5bee 100644
--- a/bin/web/src/lib/components/ManifestTable.svelte
+++ b/bin/web/src/lib/components/ManifestTable.svelte
@@ -34,7 +34,7 @@
     </tbody>
 </table>
 <!--For smaller screens we use cards-->
-<div class="lg:hidden flex flex-col gap-2">
+<div class="lg:hidden flex flex-col gap-4">
     {#if current_entry !== undefined}
         <Card entry={current_entry} current={true} i={0} server_is_recording={server_is_recording}/>
     {/if}