From afd05265ecc4de5391ae5a3330e64f2eab6644fd Mon Sep 17 00:00:00 2001
From: Dotnara Condori <dottykurmi123@gmail.com>
Date: Thu, 19 Dec 2024 12:41:10 -0400
Subject: [PATCH] Fix/tm 1561 edit width cell table (#772)

* [TM-1561] fix error width cell table in poligon review

* [TM-1561] update snapshots

* [TM-1561] fix width

---------

Co-authored-by: diego-morales-flores-1996 <diego@vizonomy.com>
---
 .../components/VersionHistory.tsx             |   2 +-
 src/components/elements/Table/Table.tsx       |   9 +-
 .../elements/Table/TableVariants.ts           |   4 +-
 .../__snapshots__/Table.stories.storyshot     | 552 ++++++++++--------
 src/styles/extended-utilities.css             |   1 +
 5 files changed, 315 insertions(+), 253 deletions(-)

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
index 5e7989a32..bb8af6a2c 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx
@@ -363,7 +363,7 @@ const VersionHistory = ({
             options={polygonVersionData ?? []}
             optionVariant="text-12-light"
             titleClassname="one-line-text !w-full !text-nowrap"
-            titleContainerClassName="!w-[92%] !text-nowrap"
+            titleContainerClassName="!w-[calc(100%-25px)] !text-nowrap"
             defaultValue={[selectPolygonVersion?.uuid ?? selectedPolygon?.uuid] as string[]}
             onChange={e => {
               const polygonVersionData = (data as SitePolygonsDataResponse)?.find(item => item.uuid === e[0]);
diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx
index 2c7ad9b2d..78becf5e2 100644
--- a/src/components/elements/Table/Table.tsx
+++ b/src/components/elements/Table/Table.tsx
@@ -186,6 +186,7 @@ function Table<TData extends RowData>({
                           }
                         >
                           <div
+                            className="inline w-full max-w-full"
                             style={{
                               fontSize: "inherit",
                               fontWeight: "inherit",
@@ -193,10 +194,10 @@ function Table<TData extends RowData>({
                               fontFamily: "inherit"
                             }}
                           >
-                            <span
-                              className="font-inherit relative"
+                            <div
+                              className="font-inherit relative w-full max-w-full"
                               style={{
-                                marginRight: `${iconRefs.current[header.index]?.getBoundingClientRect().width}px`
+                                paddingRight: `${iconRefs.current[header.index]?.getBoundingClientRect().width}px`
                               }}
                             >
                               <span
@@ -238,7 +239,7 @@ function Table<TData extends RowData>({
                                   />
                                 </span>
                               </When>
-                            </span>
+                            </div>
                           </div>
                         </th>
                       );
diff --git a/src/components/elements/Table/TableVariants.ts b/src/components/elements/Table/TableVariants.ts
index fd80fb984..a444c5694 100644
--- a/src/components/elements/Table/TableVariants.ts
+++ b/src/components/elements/Table/TableVariants.ts
@@ -97,9 +97,9 @@ export const VARIANT_TABLE_SITE_POLYGON_REVIEW = {
   table: "border-collapse",
   name: "border-airtable",
   tableWrapper: "border border-neutral-200 rounded-lg overflow-hidden",
-  trHeader: "bg-neutral-150",
+  trHeader: "bg-neutral-150 sticky top-0 z-auto",
   thHeader:
-    "first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0",
+    "first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto",
   tBody: "",
   trBody: "bg-white border-y border-neutral-200 last:border-b-0",
   tdBody: "text-14-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 ",
diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
index f4994aa8d..ebac4acaa 100644
--- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot
+++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot
@@ -124,6 +124,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -133,11 +134,11 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -146,7 +147,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -161,6 +162,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -170,11 +172,11 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -200,7 +202,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -215,6 +217,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -224,11 +227,11 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -254,7 +257,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -269,6 +272,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -278,11 +282,11 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -291,7 +295,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -306,6 +310,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -315,18 +320,18 @@ exports[`Storyshots Components/Elements/Table Default 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -1065,6 +1070,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -1074,11 +1080,11 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -1087,7 +1093,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -1102,6 +1108,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -1111,11 +1118,11 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -1141,7 +1148,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -1156,6 +1163,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -1165,11 +1173,11 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -1195,7 +1203,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -1210,6 +1218,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -1219,11 +1228,11 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -1232,7 +1241,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -1247,6 +1256,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -1256,18 +1266,18 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -2006,6 +2016,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2015,11 +2026,11 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -2028,7 +2039,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -2043,6 +2054,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2052,11 +2064,11 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -2082,7 +2094,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -2097,6 +2109,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2106,11 +2119,11 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -2136,7 +2149,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -2151,6 +2164,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2160,11 +2174,11 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -2173,7 +2187,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -2188,6 +2202,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2197,18 +2212,18 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -2947,6 +2962,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2956,11 +2972,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -2969,7 +2985,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -2984,6 +3000,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -2993,11 +3010,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -3023,7 +3040,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -3038,6 +3055,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -3047,11 +3065,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -3077,7 +3095,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -3092,6 +3110,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -3101,11 +3120,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -3114,7 +3133,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -3129,6 +3148,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -3138,18 +3158,18 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -3891,6 +3911,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -3900,11 +3921,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -3913,7 +3934,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     >
                       Funding type
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -3928,6 +3949,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -3937,11 +3959,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -3967,7 +3989,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -3982,6 +4004,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -3991,11 +4014,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -4021,7 +4044,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -4036,6 +4059,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -4045,11 +4069,11 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -4058,7 +4082,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     >
                       Status
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -4073,6 +4097,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -4082,18 +4107,18 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
                     <span
                       className="font-inherit "
                     />
-                  </span>
+                  </div>
                 </div>
               </th>
             </tr>
@@ -4833,6 +4858,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -4842,11 +4868,11 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -4855,7 +4881,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -4870,6 +4896,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -4879,11 +4906,11 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -4909,7 +4936,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -4924,6 +4951,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -4933,11 +4961,11 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -4963,7 +4991,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -4978,6 +5006,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -4987,11 +5016,11 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -5000,7 +5029,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -5015,6 +5044,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -5024,18 +5054,18 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -5774,6 +5804,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -5783,11 +5814,11 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -5796,7 +5827,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -5811,6 +5842,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -5820,11 +5852,11 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -5850,7 +5882,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -5865,6 +5897,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -5874,11 +5907,11 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -5904,7 +5937,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -5919,6 +5952,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -5928,11 +5962,11 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -5941,7 +5975,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
@@ -5956,6 +5990,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -5965,18 +6000,18 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -6718,6 +6753,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -6727,11 +6763,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -6740,7 +6776,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     >
                       Funding type
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -6755,6 +6791,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -6764,11 +6801,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -6794,7 +6831,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -6809,6 +6846,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -6818,11 +6856,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -6848,7 +6886,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -6863,6 +6901,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -6872,11 +6911,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -6885,7 +6924,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     >
                       Status
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -6900,6 +6939,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -6909,18 +6949,18 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
                     <span
                       className="font-inherit "
                     />
-                  </span>
+                  </div>
                 </div>
               </th>
             </tr>
@@ -7663,6 +7703,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -7672,11 +7713,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -7685,7 +7726,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     >
                       Funding type
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -7700,6 +7741,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -7709,11 +7751,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -7739,7 +7781,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -7754,6 +7796,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -7763,11 +7806,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -7793,7 +7836,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -7808,6 +7851,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -7817,11 +7861,11 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -7830,7 +7874,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     >
                       Status
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -7845,6 +7889,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -7854,18 +7899,18 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1`
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
                     <span
                       className="font-inherit "
                     />
-                  </span>
+                  </div>
                 </div>
               </th>
             </tr>
@@ -8608,6 +8653,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -8617,11 +8663,11 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -8630,7 +8676,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     >
                       Funding type
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -8645,6 +8691,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -8654,11 +8701,11 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -8684,7 +8731,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -8699,6 +8746,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -8708,11 +8756,11 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -8738,7 +8786,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -8753,6 +8801,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -8762,11 +8811,11 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -8775,7 +8824,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     >
                       Status
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -8790,6 +8839,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -8799,18 +8849,18 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
                     <span
                       className="font-inherit "
                     />
-                  </span>
+                  </div>
                 </div>
               </th>
             </tr>
@@ -9536,11 +9586,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
           className="bg-blueCustom-100"
         >
           <tr
-            className="bg-neutral-150"
+            className="bg-neutral-150 sticky top-0 z-auto"
           >
             <th
               align="left"
-              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto"
               colSpan={1}
               onClick={[Function]}
               style={
@@ -9550,6 +9600,7 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -9559,11 +9610,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -9572,12 +9623,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   >
                     Funding type
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
               align="left"
-              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 cursor-pointer"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto cursor-pointer"
               colSpan={1}
               onClick={[Function]}
               style={
@@ -9587,6 +9638,7 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -9596,11 +9648,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -9626,12 +9678,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
               align="left"
-              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 cursor-pointer"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto cursor-pointer"
               colSpan={1}
               onClick={[Function]}
               style={
@@ -9641,6 +9693,7 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -9650,11 +9703,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -9680,12 +9733,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                       }
                     />
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
               align="left"
-              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto"
               colSpan={1}
               onClick={[Function]}
               style={
@@ -9695,6 +9748,7 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -9704,11 +9758,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
@@ -9717,12 +9771,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   >
                     Status
                   </span>
-                </span>
+                </div>
               </div>
             </th>
             <th
               align="left"
-              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0"
+              className="py-4 first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto"
               colSpan={1}
               onClick={[Function]}
               style={
@@ -9732,6 +9786,7 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
               }
             >
               <div
+                className="inline w-full max-w-full"
                 style={
                   Object {
                     "color": "currentColor",
@@ -9741,18 +9796,18 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = `
                   }
                 }
               >
-                <span
-                  className="font-inherit relative"
+                <div
+                  className="font-inherit relative w-full max-w-full"
                   style={
                     Object {
-                      "marginRight": "undefinedpx",
+                      "paddingRight": "undefinedpx",
                     }
                   }
                 >
                   <span
                     className="font-inherit "
                   />
-                </span>
+                </div>
               </div>
             </th>
           </tr>
@@ -10494,6 +10549,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -10503,11 +10559,11 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -10516,7 +10572,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     >
                       Funding type
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -10531,6 +10587,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -10540,11 +10597,11 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -10570,7 +10627,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -10585,6 +10642,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -10594,11 +10652,11 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -10624,7 +10682,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                         }
                       />
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -10639,6 +10697,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -10648,11 +10707,11 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
@@ -10661,7 +10720,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     >
                       Status
                     </span>
-                  </span>
+                  </div>
                 </div>
               </th>
               <th
@@ -10676,6 +10735,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                 }
               >
                 <div
+                  className="inline w-full max-w-full"
                   style={
                     Object {
                       "color": "currentColor",
@@ -10685,18 +10745,18 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = `
                     }
                   }
                 >
-                  <span
-                    className="font-inherit relative"
+                  <div
+                    className="font-inherit relative w-full max-w-full"
                     style={
                       Object {
-                        "marginRight": "undefinedpx",
+                        "paddingRight": "undefinedpx",
                       }
                     }
                   >
                     <span
                       className="font-inherit "
                     />
-                  </span>
+                  </div>
                 </div>
               </th>
             </tr>
diff --git a/src/styles/extended-utilities.css b/src/styles/extended-utilities.css
index a1ff1c221..13ee9b42f 100644
--- a/src/styles/extended-utilities.css
+++ b/src/styles/extended-utilities.css
@@ -674,6 +674,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-wrap: nowrap;
 }
 
 .two-line-text{