From e6c69a6ac190610ade29affea867a66342a5942d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Andr=C3=A9=20Vadla=20Ravn=C3=A5s?= <oleavr@gmail.com>
Date: Tue, 24 Sep 2024 23:43:28 +0200
Subject: [PATCH] Wire up some more

---
 apps/tracer/src/App.css             |  3 ++-
 apps/tracer/src/DisassemblyView.css |  2 +-
 apps/tracer/src/DisassemblyView.tsx |  7 ++++++-
 apps/tracer/src/EventView.css       | 25 +++++++++++++++++--------
 apps/tracer/src/EventView.tsx       | 22 ++++++++++++----------
 5 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/apps/tracer/src/App.css b/apps/tracer/src/App.css
index 9707d0c..1102b42 100644
--- a/apps/tracer/src/App.css
+++ b/apps/tracer/src/App.css
@@ -34,6 +34,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    white-space: nowrap;
 }
 
 .editor-area section {
@@ -66,7 +67,7 @@
 }
 
 .bottom-tabs .bp5-tab-list {
-    padding-left: 5px;
+    padding-left: 10px;
 }
 
 .bottom-tabs .bp5-tab:focus {
diff --git a/apps/tracer/src/DisassemblyView.css b/apps/tracer/src/DisassemblyView.css
index 30502a4..88b4e93 100644
--- a/apps/tracer/src/DisassemblyView.css
+++ b/apps/tracer/src/DisassemblyView.css
@@ -10,4 +10,4 @@
 
 a.disassembly-menu-open {
     background-color: #ef6456;
-}
\ No newline at end of file
+}
diff --git a/apps/tracer/src/DisassemblyView.tsx b/apps/tracer/src/DisassemblyView.tsx
index 8e240f4..e6db726 100644
--- a/apps/tracer/src/DisassemblyView.tsx
+++ b/apps/tracer/src/DisassemblyView.tsx
@@ -104,9 +104,14 @@ export default function DisassemblyView({ target }: DisassemblyViewProps = {}) {
         target.classList.add("disassembly-menu-open");
     }, [handleAddressMenuClose, addressMenu]);
 
+    if (isLoading) {
+        return (
+            <Spinner className="disassembly-view" />
+        );
+    }
+
     return (
         <div className="disassembly-view" onContextMenu={handleContextMenu}>
-            {isLoading ? (<Spinner className="disassembly-view" />) : undefined}
             {r2Output.map((line, i) => <div key={i} dangerouslySetInnerHTML={{ __html: line }} />)}
         </div>
     );
diff --git a/apps/tracer/src/EventView.css b/apps/tracer/src/EventView.css
index a1943c6..d9807e4 100644
--- a/apps/tracer/src/EventView.css
+++ b/apps/tracer/src/EventView.css
@@ -13,30 +13,39 @@
 }
 
 .event-item {
-    padding-top: 2px;
+    display: grid;
+    grid-template-columns: min-content;
+    white-space: nowrap;
+}
+
+.event-summary {
+    grid-row: 1;
+    grid-column: 1;
+}
+
+.event-details {
+    grid-row: 2;
+    grid-column: 1;
+    padding-right: 24px !important;
 }
 
 .event-timestamp {
+    padding: 0 10px;
     color: #555;
-    margin-left: 5px;
-    margin-right: 5px;
     vertical-align: middle;
     text-align: right;
 }
 
 .event-message {
-    min-height: 0;
-    text-align: left;
     font-size: 12px;
     font-weight: bold;
-    white-space: pre-line;
 }
 
 .event-message:focus {
     outline: 0;
 }
 
-.event-highlighted {
+.event-highlighted .event-summary {
     background-color: #ef6456;
 }
 
@@ -74,4 +83,4 @@
 
 .event-dismiss {
     margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/apps/tracer/src/EventView.tsx b/apps/tracer/src/EventView.tsx
index 86b00d2..f1b01f2 100644
--- a/apps/tracer/src/EventView.tsx
+++ b/apps/tracer/src/EventView.tsx
@@ -74,16 +74,18 @@ export default function EventView({ events, highlightedIndex = null, onActivate,
                             ref={isHighlighted ? highlightedRef : undefined}
                             className={eventClasses.join(" ")}
                         >
-                            <span className="event-timestamp">{timestampStr} ms</span>
-                            <span className={"event-indent " + colorClass}>{INDENT.repeat(depth)}</span>
-                            <Button
-                                className={"event-message " + colorClass}
-                                minimal={true}
-                                alignText="left"
-                                onClick={() => onActivate(targetId, i)}
-                            >
-                                {message}
-                            </Button>
+                            <div className="event-summary">
+                                <span className="event-timestamp">{timestampStr} ms</span>
+                                <span className={"event-indent " + colorClass}>{INDENT.repeat(depth)}</span>
+                                <Button
+                                    className={"event-message " + colorClass}
+                                    minimal={true}
+                                    alignText="left"
+                                    onClick={() => onActivate(targetId, i)}
+                                >
+                                    {message}
+                                </Button>
+                            </div>
                             {isHighlighted ? (
                                 <Card className="event-details" interactive={true} compact={true}>
                                     <table>