From ecccc1bc937962fac4256801c9dacfd032421a69 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Tue, 29 Aug 2023 17:12:33 +0200
Subject: [PATCH] list styles

---
 app/hooks/cost-surface/index.ts               |  3 +-
 .../components/inventory-table/index.tsx      | 42 ++++++++++---------
 .../inventory-table/row-item/index.tsx        | 12 +++---
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/hooks/cost-surface/index.ts b/app/hooks/cost-surface/index.ts
index b9f3c59e2f..1d3c852957 100644
--- a/app/hooks/cost-surface/index.ts
+++ b/app/hooks/cost-surface/index.ts
@@ -37,7 +37,8 @@ export function useProjectCostSurfaces<T = CostSurface[]>(
     queryFn: async () =>
       API.request<CostSurface[]>({
         method: 'GET',
-        url: `/projects/${pid}/cost-surfaces`,
+        // !TODO: change this to the correct endpoint
+        url: `/projects/${pid}/protected-areas`,
         headers: {
           Authorization: `Bearer ${session.accessToken}`,
         },
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
index 906bb73aa3..6c4195bed2 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -43,25 +43,29 @@ const InventoryTable = ({
                   onChange={onSelectAll}
                 />
               </th>
-              <th className="flex-1 pl-2">
-                <HeaderItem
-                  text={'Name'}
-                  name={'name'}
-                  columns={columns}
-                  sorting={sorting}
-                  onClick={onSortChange}
-                />
-              </th>
-              <th className="flex flex-1 justify-start py-2 pl-14">
-                <HeaderItem
-                  className="justify-center"
-                  text={'Type'}
-                  name={'tag'}
-                  columns={columns}
-                  sorting={sorting}
-                  onClick={onSortChange}
-                />
-              </th>
+              {columns['name'] && (
+                <th className="flex-1 pl-2">
+                  <HeaderItem
+                    text={'Name'}
+                    name={'name'}
+                    columns={columns}
+                    sorting={sorting}
+                    onClick={onSortChange}
+                  />
+                </th>
+              )}
+              {columns['tag'] && (
+                <th className="flex flex-1 justify-start py-2 pl-14">
+                  <HeaderItem
+                    className="justify-center"
+                    text={'Type'}
+                    name={'tag'}
+                    columns={columns}
+                    sorting={sorting}
+                    onClick={onSortChange}
+                  />
+                </th>
+              )}
             </tr>
           </thead>
           <tbody className="block max-h-[calc(100vh-430px)] divide-y divide-gray-400 overflow-y-auto overflow-x-hidden pl-1 align-baseline text-sm">
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
index 9facd7eb38..268f339fc4 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -20,7 +20,7 @@ const RowItem = ({
   const { id, name, scenarios, tag, isVisibleOnMap } = item;
 
   return (
-    <tr key={id} className="align-top">
+    <tr key={id} className="flex w-full align-top">
       <td className="pb-2 pr-1 pt-5">
         <Checkbox
           id={`select-${id}`}
@@ -41,16 +41,16 @@ const RowItem = ({
           scenarios.
         </div>
       </td>
-      <td className="px-6 pb-2 pt-5 text-xs">
-        {tag && (
+      {tag && (
+        <td className="w-28 px-6 pb-2 pt-5 text-xs">
           <div className="flex justify-center">
             <span className="whitespace-nowrap rounded-full bg-yellow-600 bg-opacity-10 px-2 py-1 text-yellow-600">
               {tag}
             </span>
           </div>
-        )}
-      </td>
-      <td className="pb-2 pl-1 pr-2 pt-5">
+        </td>
+      )}
+      <td className="w-22 ml-auto pb-2 pl-1 pr-2 pt-5">
         <div className="flex gap-6">
           <button type="button" onClick={() => onToggleSeeOnMap(id)}>
             <Icon