Match 'Bytes' & 'Logs' sections equally

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 font-medium px-2.5 border-b border-zinc-700 pb-1 text-zinc-300">
-      <p className="text-xs mx-3 pt-0.5 text-zinc-400">
+        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", {
+            className={cn(
-              "text-zinc-500":
+              "hover:bg-black/45 select-none",
-                Math.random() < 0.9 || index < 50 || index > 16 * 10,
+              Math.random() < 0.9 || index < 50 || index > 16 * 10
-            })}
+                ? "text-zinc-500"
+                : "cursor-pointer"
+            )}
           >
             {byte}
           </div>

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 (