From c5bc4c3e6aa9df94a1570d735a126636269cdb8a Mon Sep 17 00:00:00 2001
From: Xavi Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 10 Feb 2026 15:28:57 +0100
Subject: [PATCH 1/3] fix: padding in list

---
 src/components/list/List.tsx                  | 31 +++++++++----------
 .../skeletonLoader/SkeletonLoader.tsx         |  6 ++--
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/list/List.tsx b/src/components/list/List.tsx
index 984e499..f6fa515 100644
--- a/src/components/list/List.tsx
+++ b/src/components/list/List.tsx
@@ -296,24 +296,23 @@ const List = <T extends { id: number }, F extends keyof T>({
       className={`relative flex h-full flex-col overflow-x-auto overflow-y-hidden ${className}`}
       ref={containerRef}
     >
-      {!isEmptyState ? (
-        <ListHeader
-          selectedItems={selectedItems}
-          onTopSelectionCheckboxClick={onTopSelectionCheckboxClick}
-          items={items}
-          header={header}
-          orderBy={orderBy}
-          onOrderableColumnClicked={onOrderableColumnClicked}
-          menu={menu}
-          displayMenuDiv={displayMenuDiv}
-          isVerticalScrollbarVisible={isVerticalScrollbarVisible}
-          checkboxDataCy={checkboxDataCy}
-          onClose={onCloseContextMenu}
-        />
-      ) : null}
-
       {/* BODY */}
       <div id="scrollableList" className="flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto">
+        {!isEmptyState ? (
+          <ListHeader
+            selectedItems={selectedItems}
+            onTopSelectionCheckboxClick={onTopSelectionCheckboxClick}
+            items={items}
+            header={header}
+            orderBy={orderBy}
+            onOrderableColumnClicked={onOrderableColumnClicked}
+            menu={menu}
+            displayMenuDiv={displayMenuDiv}
+            isVerticalScrollbarVisible={isVerticalScrollbarVisible}
+            checkboxDataCy={checkboxDataCy}
+            onClose={onCloseContextMenu}
+          />
+        ) : null}
         {isEmptyState ? (
           emptyState
         ) : items.length > 0 && !forceLoading ? (
diff --git a/src/components/skeletonLoader/SkeletonLoader.tsx b/src/components/skeletonLoader/SkeletonLoader.tsx
index fa04b42..ddf7ed9 100644
--- a/src/components/skeletonLoader/SkeletonLoader.tsx
+++ b/src/components/skeletonLoader/SkeletonLoader.tsx
@@ -11,8 +11,9 @@ export const SkeletonLoaderItem = ({ skeletonItem, columns }: SkeletonLoaderItem
   return (
     <div
       data-testid="skeleton-loader-item"
-      className={'group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5'}
+      className={'group relative flex h-14 animate-pulse flex-row items-center px-5'}
     >
+      <div className="w-9 shrink-0" />
       {new Array(columns.length).fill(0).map((col, i) => (
         <div
           key={`${col}-${i}`}
@@ -21,6 +22,7 @@ export const SkeletonLoaderItem = ({ skeletonItem, columns }: SkeletonLoaderItem
           {skeletonItem?.[i]}
         </div>
       ))}
+      <div className="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5" />
     </div>
   );
 };
@@ -29,7 +31,7 @@ export const SkeletonLoaderItem = ({ skeletonItem, columns }: SkeletonLoaderItem
  * SkeletonLoader component to display loading placeholders in list layouts.
  *
  * @param skeleton - Array of skeleton items, {skeletonItem, columns}
- *                 - The params of each sekeletonItem:
+ *                 - The params of each skeletonItem:
  *                            - skeletonItem: - Array of elements representing the loading placeholders.
  *                            - columns: - An array of CSS class names for each column, defining their layout and style.
  *

From 62287ac0da6321d62d6cfe356e88d3beb78882d4 Mon Sep 17 00:00:00 2001
From: Xavi Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 10 Feb 2026 15:32:32 +0100
Subject: [PATCH 2/3] chore: bump package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ac063ab..7ab94d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

From a664f595e58cb90d7f85581b627b834d6a200e0c Mon Sep 17 00:00:00 2001
From: Xavi Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 10 Feb 2026 15:41:46 +0100
Subject: [PATCH 3/3] tests: fix snapshots

---
 .../__test__/__snapshots__/List.test.tsx.snap | 224 +++++++++---------
 .../__test__/SkeletonLoader.test.tsx          |   6 +-
 .../SkeletonLoader.test.tsx.snap              |  48 +++-
 3 files changed, 157 insertions(+), 121 deletions(-)

diff --git a/src/components/list/__test__/__snapshots__/List.test.tsx.snap b/src/components/list/__test__/__snapshots__/List.test.tsx.snap
index 64e4c64..e37c6ba 100644
--- a/src/components/list/__test__/__snapshots__/List.test.tsx.snap
+++ b/src/components/list/__test__/__snapshots__/List.test.tsx.snap
@@ -10,75 +10,75 @@ exports[`List component > should match snapshot 1`] = `
         id="generic-list-component"
       >
         <div
-          class="flex min-w-max h-12 shrink-0 flex-row px-5"
+          class="flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto"
+          id="scrollableList"
         >
           <div
-            class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
+            class="flex min-w-max h-12 shrink-0 flex-row px-5"
           >
             <div
-              class="flex h-full flex-row items-center justify-between pr-4"
+              class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
             >
-              <label
-                class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+              <div
+                class="flex h-full flex-row items-center justify-between pr-4"
               >
-                <div
-                  class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+                <label
+                  class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
                 >
-                  <svg
-                    class="absolute -inset-px"
-                    fill="none"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    width="20"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
                   >
-                    <rect
-                      fill="currentColor"
-                      height="2"
-                      rx="1"
-                      width="12"
-                      x="4"
-                      y="9"
-                    />
-                  </svg>
-                </div>
-                <input
-                  checked=""
-                  class="base-checkbox h-0 w-0 appearance-none opacity-0"
-                  readonly=""
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <button
-              class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
-              data-cy="false"
-            >
-              <span
+                    <svg
+                      class="absolute -inset-px"
+                      fill="none"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect
+                        fill="currentColor"
+                        height="2"
+                        rx="1"
+                        width="12"
+                        x="4"
+                        y="9"
+                      />
+                    </svg>
+                  </div>
+                  <input
+                    checked=""
+                    class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                    readonly=""
+                    type="checkbox"
+                  />
+                </label>
+              </div>
+              <button
+                class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
                 data-cy="false"
               >
-                Name
-              </span>
-            </button>
-            <button
-              class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
-              data-cy="false"
-            >
-              <span
+                <span
+                  data-cy="false"
+                >
+                  Name
+                </span>
+              </button>
+              <button
+                class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
                 data-cy="false"
               >
-                Age
-              </span>
-            </button>
-            <div
-              class="flex h-full w-12 shrink-0"
-            />
+                <span
+                  data-cy="false"
+                >
+                  Age
+                </span>
+              </button>
+              <div
+                class="flex h-full w-12 shrink-0"
+              />
+            </div>
           </div>
-        </div>
-        <div
-          class="flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto"
-          id="scrollableList"
-        >
           <div>
             <div
               class="group relative flex h-14 flex-row items-center pl-14 pr-5 bg-primary/10 text-gray-100 dark:bg-primary/20"
@@ -204,75 +204,75 @@ exports[`List component > should match snapshot 1`] = `
       id="generic-list-component"
     >
       <div
-        class="flex min-w-max h-12 shrink-0 flex-row px-5"
+        class="flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto"
+        id="scrollableList"
       >
         <div
-          class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
+          class="flex min-w-max h-12 shrink-0 flex-row px-5"
         >
           <div
-            class="flex h-full flex-row items-center justify-between pr-4"
+            class="flex h-full min-w-full flex-row items-center border-b border-gray-10"
           >
-            <label
-              class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+            <div
+              class="flex h-full flex-row items-center justify-between pr-4"
             >
-              <div
-                class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+              <label
+                class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
               >
-                <svg
-                  class="absolute -inset-px"
-                  fill="none"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
                 >
-                  <rect
-                    fill="currentColor"
-                    height="2"
-                    rx="1"
-                    width="12"
-                    x="4"
-                    y="9"
-                  />
-                </svg>
-              </div>
-              <input
-                checked=""
-                class="base-checkbox h-0 w-0 appearance-none opacity-0"
-                readonly=""
-                type="checkbox"
-              />
-            </label>
-          </div>
-          <button
-            class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
-            data-cy="false"
-          >
-            <span
+                  <svg
+                    class="absolute -inset-px"
+                    fill="none"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect
+                      fill="currentColor"
+                      height="2"
+                      rx="1"
+                      width="12"
+                      x="4"
+                      y="9"
+                    />
+                  </svg>
+                </div>
+                <input
+                  checked=""
+                  class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                  readonly=""
+                  type="checkbox"
+                />
+              </label>
+            </div>
+            <button
+              class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  100px cursor-pointer hover:text-gray-80"
               data-cy="false"
             >
-              Name
-            </span>
-          </button>
-          <button
-            class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
-            data-cy="false"
-          >
-            <span
+              <span
+                data-cy="false"
+              >
+                Name
+              </span>
+            </button>
+            <button
+              class="flex h-full shrink-0  flex-row items-center space-x-1.5 text-base font-medium text-gray-60  50px cursor-pointer hover:text-gray-80"
               data-cy="false"
             >
-              Age
-            </span>
-          </button>
-          <div
-            class="flex h-full w-12 shrink-0"
-          />
+              <span
+                data-cy="false"
+              >
+                Age
+              </span>
+            </button>
+            <div
+              class="flex h-full w-12 shrink-0"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto"
-        id="scrollableList"
-      >
         <div>
           <div
             class="group relative flex h-14 flex-row items-center pl-14 pr-5 bg-primary/10 text-gray-100 dark:bg-primary/20"
diff --git a/src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx b/src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx
index 8a44eec..a9fc467 100644
--- a/src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx
+++ b/src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx
@@ -37,9 +37,9 @@ describe('SkeletonLoader', () => {
 
     const items = screen.getAllByTestId('skeleton-loader-item')[0].querySelectorAll('div');
 
-    const column1 = items[0];
-    const column2 = items[4];
-    const column3 = items[6];
+    const column1 = items[1];
+    const column2 = items[5];
+    const column3 = items[7];
     expect(column1).toHaveClass('flex');
     expect(column2).toHaveClass('w-date');
     expect(column3).toHaveClass('w-size');
diff --git a/src/components/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap b/src/components/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap
index bdea00f..788d845 100644
--- a/src/components/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap
+++ b/src/components/skeletonLoader/__test__/__snapshots__/SkeletonLoader.test.tsx.snap
@@ -6,9 +6,12 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5"
+        class="group relative flex h-14 animate-pulse flex-row items-center px-5"
         data-testid="skeleton-loader-item"
       >
+        <div
+          class="w-9 shrink-0"
+        />
         <div
           class="relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 flex grow items-center min-w-driveNameHeader"
         >
@@ -37,11 +40,17 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
             class="ml-3 h-4 w-24 rounded bg-gray-5"
           />
         </div>
+        <div
+          class="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"
+        />
       </div>
       <div
-        class="group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5"
+        class="group relative flex h-14 animate-pulse flex-row items-center px-5"
         data-testid="skeleton-loader-item"
       >
+        <div
+          class="w-9 shrink-0"
+        />
         <div
           class="relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 flex grow items-center min-w-driveNameHeader"
         >
@@ -70,11 +79,17 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
             class="ml-3 h-4 w-24 rounded bg-gray-5"
           />
         </div>
+        <div
+          class="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"
+        />
       </div>
       <div
-        class="group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5"
+        class="group relative flex h-14 animate-pulse flex-row items-center px-5"
         data-testid="skeleton-loader-item"
       >
+        <div
+          class="w-9 shrink-0"
+        />
         <div
           class="relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 flex grow items-center min-w-driveNameHeader"
         >
@@ -103,14 +118,20 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
             class="ml-3 h-4 w-24 rounded bg-gray-5"
           />
         </div>
+        <div
+          class="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"
+        />
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5"
+      class="group relative flex h-14 animate-pulse flex-row items-center px-5"
       data-testid="skeleton-loader-item"
     >
+      <div
+        class="w-9 shrink-0"
+      />
       <div
         class="relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 flex grow items-center min-w-driveNameHeader"
       >
@@ -139,11 +160,17 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
           class="ml-3 h-4 w-24 rounded bg-gray-5"
         />
       </div>
+      <div
+        class="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"
+      />
     </div>
     <div
-      class="group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5"
+      class="group relative flex h-14 animate-pulse flex-row items-center px-5"
       data-testid="skeleton-loader-item"
     >
+      <div
+        class="w-9 shrink-0"
+      />
       <div
         class="relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 flex grow items-center min-w-driveNameHeader"
       >
@@ -172,11 +199,17 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
           class="ml-3 h-4 w-24 rounded bg-gray-5"
         />
       </div>
+      <div
+        class="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"
+      />
     </div>
     <div
-      class="group relative flex h-14 animate-pulse flex-row items-center pl-14 pr-5"
+      class="group relative flex h-14 animate-pulse flex-row items-center px-5"
       data-testid="skeleton-loader-item"
     >
+      <div
+        class="w-9 shrink-0"
+      />
       <div
         class="relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 flex grow items-center min-w-driveNameHeader"
       >
@@ -205,6 +238,9 @@ exports[`SkeletonLoader > should match snapshot 1`] = `
           class="ml-3 h-4 w-24 rounded bg-gray-5"
         />
       </div>
+      <div
+        class="flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"
+      />
     </div>
   </div>,
   "debug": [Function],