File Inventory Table Refinement

[yiwenxx]

Issue

• In the file inventory table, "Name" and "Relative Path" column should be wider and take up the majority of the space since the text content is generally longer. In the current staging, the column widths are a bit off, more space should be assigned to "Name" column and less for "Last Updated"
• In the table header, the first letter of column name need to be capitalized (Name, Relative Path, Size, Last Updated)

Implementation Notes

• We slightly altered the design to cater to the Data Table properties (more detailed breakdown of the table can be access in Figma dev mode). The table consists of a table header, a table footer, and 20 rows in each page, and each row is made up of 4 cells.
• To support responsiveness and different screen sizes, the column width should be set up using percentage rather than fixed pixels. As described in the screenshot below, Name (32%), Relative Path (40%), Size (10%), Last Updated (18%) each takes up a portion of the table. In this specific example, the total width adds up to 1200px.
• Each cell has a 16px horizontal padding and 12px vertical padding; table header & footer height is auto while table rows have a fixed height of 64px for consistency.

Link to Figma: https://www.figma.com/design/rgzEYTpnGl6l68moRSVwYg/Phase-1-UI-Details?node-id=2612-4394&t=kDkjmXWded9iXkD1-4

Acceptance Criteria

• The table consists of a table header (column headers), a table footer (pagination), and rows representing individual files
• There are up to 20 rows on each page of the table, leading to up to 5 pages (given the preview limit of 100)
• Each row is made up of 4 cells, corresponding to the 4 columns
• The column headers are capitalized using title case: Name, Relative Path, Size, and Last Updated
• The column widths are readjusted using percentages rather than fixed pixels: Name (32%), Relative Path (40%), Size (10%), Last Updated (18%)
• Each cell has a 16px horizontal padding and 12px vertical padding
• Table header & footer height is auto
• Table rows have a fixed height of 64px for consistency
• Responsiveness to screen size matches the Figma designs