fix: fix scrolling header visual broken layout in templates (#449)

- fix scrolling header visual broken layout in templates

| Before | After |
|--------|--------|
| <img width="900" height="140" alt="Screenshot 2026-06-23 at 14 07 46"
src="https://github.com/user-attachments/assets/8b68544a-8b4e-4156-b6d7-1e060c4684ef"
/> | <img width="484" height="86" alt="Screenshot 2026-06-23 at 14 08
10"
src="https://github.com/user-attachments/assets/5e7f74ae-41bc-4ee5-880f-6c8e115a7844"
/> |

Context: Quick fix to remove customer-facing visual bug
Follow-up: Create a unified table hover experience in the design system
for both table headers and rows

Author: Kraci

src/features/dashboard/templates/builds/table.tsx

@@ -235,7 +235,10 @@ const BuildsTable = ({
       >
         <DataTableHeader className="sticky top-0 z-30 bg-bg">
           {table.getHeaderGroups().map((headerGroup) => (
-            <DataTableRow key={headerGroup.id} className="border-b-0">
+            <DataTableRow
+              key={headerGroup.id}
+              className="border-b-0 -mx-2 px-2 w-[calc(100%+16px)]"
+            >
               {headerGroup.headers.map((header) => (
                 <DataTableHead
                   key={header.id}

src/features/dashboard/templates/list/table.tsx

@@ -184,7 +184,10 @@ export default function TemplatesTable() {
         >
           <DataTableHeader className="sticky top-0 shadow-xs bg-bg z-30">
             {table.getHeaderGroups().map((headerGroup) => (
-              <DataTableRow key={headerGroup.id} className="border-b-0">
+              <DataTableRow
+                key={headerGroup.id}
+                className="border-b-0 -mx-2 px-2 w-[calc(100%+16px)]"
+              >
                 {headerGroup.headers.map((header) => (
                   <DataTableHead
                     key={header.id}