Trace Page Redesign

app/globals.css

@@ -121,4 +121,29 @@
   50% {
     background-position: 100% 50%;
   }
+}
+
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 2px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.resizer.isResizing {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .resizer {
+    opacity: 0;
+  }
+
+  *:hover > .resizer {
+    opacity: 1;
+  }
 }

components/project/traces/trace-row-skeleton.tsx

@@ -6,23 +6,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 export default function TraceRowSkeleton() {
   return (
     <div className="flex flex-col">
-      <div className="grid grid-cols-5 items-start justify-stretch gap-3 py-3 px-4">
-        <div className="text-xs">
-          <Skeleton className="w-full h-6" />
-        </div>
-        <div className="text-xs h-12 overflow-y-scroll">
-          <Skeleton className="w-full h-6" />
-        </div>
-        <div className="text-xs h-12 overflow-y-scroll">
-          <Skeleton className="w-full h-6" />
-        </div>
-        <div className="text-xs text-end">
-          <Skeleton className="w-full h-6" />
-        </div>
-        <div className="text-end">
-          <Skeleton className="w-full h-6" />
-        </div>
-      </div>
+      <Skeleton className="w-full h-5 my-3 mx-3" />
       <Separator orientation="horizontal" />
     </div>
   );