diff --git a/packages/components/table/TableRow.tsx b/packages/components/table/TableRow.tsx index 9839e3d940..0507bf9ca3 100644 --- a/packages/components/table/TableRow.tsx +++ b/packages/components/table/TableRow.tsx @@ -6,6 +6,8 @@ import { fontSemibold12 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText"; +import { useIsMobile } from "@/hooks/useIsMobile"; + export type TableRowHeading = { label: string; flex: number }; interface TableRowProps { @@ -14,6 +16,8 @@ interface TableRowProps { } export const TableRow: React.FC = ({ headings, labelStyle }) => { + const isMobile = useIsMobile(); + return ( {headings.map(({ label, flex }, index) => ( @@ -24,7 +28,11 @@ export const TableRow: React.FC = ({ headings, labelStyle }) => { { flex, paddingRight: - headings.length - 1 === index ? 0 : layout.spacing_x1, + headings.length - 1 === index + ? isMobile + ? 0 + : layout.spacing_x1 + : 0, }, labelStyle, ]} @@ -47,7 +55,7 @@ const styles = StyleSheet.create({ width: "100%", backgroundColor: codGrayColor, minHeight: layout.contentSpacing, - paddingHorizontal: layout.spacing_x2_5, + paddingHorizontal: layout.spacing_x1_25, borderTopLeftRadius: layout.borderRadius, borderTopRightRadius: layout.borderRadius, }, diff --git a/packages/screens/Marketplace/MarketplaceScreen.tsx b/packages/screens/Marketplace/MarketplaceScreen.tsx index cffb54fb84..fafd64e362 100644 --- a/packages/screens/Marketplace/MarketplaceScreen.tsx +++ b/packages/screens/Marketplace/MarketplaceScreen.tsx @@ -60,15 +60,15 @@ import { arrayIncludes } from "@/utils/typescript"; const TABLE_COLUMNS = { rank: { label: "Rank", - flex: 0.5, + flex: 0.6, }, collectionNameData: { label: "Collection", - flex: 2.5, + flex: 2.4, }, tradeVolume: { label: "", - flex: 1.8, + flex: 1.9, }, tradeVolumeDiff: { label: "", @@ -76,7 +76,7 @@ const TABLE_COLUMNS = { }, sales: { label: "", - flex: 1, + flex: 1.1, }, floorPrice: { label: "Floor Price", @@ -88,11 +88,11 @@ const TABLE_COLUMNS = { }, supply: { label: "Supply", - flex: 1, + flex: 1.2, }, mintVolume: { label: "", - flex: 1.8, + flex: 1.5, }, }; @@ -394,9 +394,7 @@ const CollectionRow: React.FC<{ params: { id: collection.id }, }} > - - {rowData.rank} - + {rowData.rank} {rowData.collectionNameData.collectionName}