updates on the ui changes and more things

src/components/ds/DataTable.jsx

@@ -170,7 +170,7 @@ export function DataTable({
 
   if (loading) {
     return (
-      <Surface padding="none" radius="xl" className={cn('overflow-hidden', className)}>
+      <Surface padding="none" radius="md" className={cn('overflow-hidden', className)}>
         <SkeletonTable rows={initialPageSize && initialPageSize < 8 ? initialPageSize : 6} columns={columns.length} />
       </Surface>
     );
@@ -178,7 +178,7 @@ export function DataTable({
 
   if (sortedRows.length === 0) {
     return (
-      <Surface padding="none" radius="xl" className={cn('overflow-hidden', className)}>
+      <Surface padding="none" radius="md" className={cn('overflow-hidden', className)}>
         {emptyState || (
           <EmptyState
             icon={Inbox}
@@ -198,10 +198,24 @@ export function DataTable({
 
   return (
     <div className={cn('space-y-4', className)}>
-      <Surface padding="none" radius="xl" className="relative overflow-hidden">
+      {/* radius="md" (12px), down from "xl".
+
+          Surface's xl resolves to rounded-2xl — calc(var(--radius) + 8px) —
+          which with --radius at 0.75rem is a 20px corner. On a small chip that
+          reads as soft; on a full-width table it curves far enough in to cut
+          visibly across the first and last cells of the header row.
+
+          12px is `--radius` itself, and matches radiusCard in themes/dt/tokens
+          — the token meant for a large boxed region, which is what a table is.
+          A value picked off the scale rather than an arbitrary px, so it stays
+          in step if the base radius is ever retuned.
+
+          Set on all three branches (loading, empty, populated) so a table does
+          not change shape as its data arrives. */}
+      <Surface padding="none" radius="md" className="relative overflow-hidden">
         <LoadingOverlay show={refreshing} />
 
-        <div className="overflow-x-auto">
+        <div className="no-scrollbar overflow-x-auto">
           <table className="w-full border-collapse">
             {caption && <caption className="sr-only">{caption}</caption>}