Wraps value and copy button in table row (#78)

Formats the value and copy button within a table row
structure to better align with the intended layout
of the span details panel. This change improves the
visual presentation and responsiveness of the value
display and copy functionality.

Author: dcoric

src/components/Span/SpanDetailsPanel.tsx

@@ -113,23 +113,27 @@ function ValueWrapper({
 }) {
   const [tooltip, setTooltip] = useState('Copy value');
   return (
-    <span className={`flex gap-1 items-center justify-between ${italic ? 'italic' : ''}`}>
-      <span className={`p-2 ${color}`}>{displayValue || value}</span>
-      <IconButton
-        name="copy"
-        variant="secondary"
-        aria-label="Copy value"
-        className="bg-red-500"
-        tooltip={tooltip}
-        onClick={() => {
-          navigator.clipboard.writeText(value || '');
-          setTooltip((_) => 'Copied!');
-          setTimeout(() => {
-            setTooltip((_) => 'Copy value');
-          }, 1000);
-        }}
-      />
-    </span>
+    <tr>
+      <td className={`max-w-[1px] w-full ${italic ? 'italic' : ''}`}>
+        <span className={`block truncate p-2 ${color}`}>{displayValue || value}</span>
+      </td>
+      <td>
+        <IconButton
+          name="copy"
+          variant="secondary"
+          aria-label="Copy value"
+          className="bg-red-500"
+          tooltip={tooltip}
+          onClick={() => {
+            navigator.clipboard.writeText(value || '');
+            setTooltip((_) => 'Copied!');
+            setTimeout(() => {
+              setTooltip((_) => 'Copy value');
+            }, 1000);
+          }}
+        />
+      </td>
+    </tr>
   );
 }