From 87ffbda6a7c1cff5f407d0f0995e848f0a5ea729 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 28 Nov 2024 15:58:29 -0600
Subject: [PATCH] Match 'Bytes' & 'Logs' sections equally

---
 src/components/Bytes.tsx | 18 +++++++++++-------
 src/components/Logs.tsx  |  5 ++++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Bytes.tsx b/src/components/Bytes.tsx
index 6586e40..bb4224e 100644
--- a/src/components/Bytes.tsx
+++ b/src/components/Bytes.tsx
@@ -18,24 +18,28 @@ export default function Bytes({ className }: BytesProps) {
         className
       )}
     >
-      <p className="text-xs font-medium mx-2.5">Bytes</p>
-      <p className="text-xs mx-3 pt-0.5 text-zinc-400">
+      <p className="text-xs font-medium px-2.5 border-b border-zinc-700 pb-1 text-zinc-300">
+        Bytes
+      </p>
+      <p className="text-xs mx-4 pt-1.5 pb-1.5 text-zinc-400">
         You can change the offset of the bytes modified in this menu if it
         doesn't work initially.
       </p>
       <div
         className={cn(
-          "pt-2 grid grid-cols-16 font-mono mx-5 gap-1 text-center text-xs h-full overflow-y-scroll",
+          "pt-2 grid grid-cols-16 font-mono pr-2 mx-2.5 gap-1 text-center text-xs h-full overflow-y-scroll",
           className
         )}
       >
         {bytes.map((byte, index) => (
           <div
             key={index}
-            className={cn("hover:bg-black/45", {
-              "text-zinc-500":
-                Math.random() < 0.9 || index < 50 || index > 16 * 10,
-            })}
+            className={cn(
+              "hover:bg-black/45 select-none",
+              Math.random() < 0.9 || index < 50 || index > 16 * 10
+                ? "text-zinc-500"
+                : "cursor-pointer"
+            )}
           >
             {byte}
           </div>
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 602a828..f1a2a33 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -26,7 +26,10 @@ export default function Logs() {
 
   return (
     <div className="bg-black/40 py-2.5 rounded">
-      <p className="text-xs font-medium mx-2.5">Logs</p>
+      <p className="text-xs font-medium px-2.5 border-b border-zinc-700 pb-1 text-zinc-300">
+        Logs
+      </p>
+
       <div className="flex flex-col space-y-1 mt-1 text-zinc-400">
         {data.map((log) => {
           return (