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 <[email protected]>
wri · Dec 19, 2024 · afd0526 · afd0526
1 parent 0a2e376
commit afd0526
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 253 deletions.
diff --git a/...ents/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/...ents/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
@@ -186,17 +186,18 @@ function Table<TData extends RowData>({
                           }
                         >
                           <div
+                            className="inline w-full max-w-full"
                             style={{
                               fontSize: "inherit",
                               fontWeight: "inherit",
                               color: "currentColor",
                               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
@@ -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 ",