fix: marketplace ui break in mobile view

TERITORI · Apr 18, 2024 · b10f749 · b10f749
1 parent 49e1a6d
commit b10f749
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/components/sorts/SearchInput.tsx b/packages/components/sorts/SearchInput.tsx
@@ -13,11 +13,14 @@ import { layout } from "../../utils/style/layout";
 import { SVG } from "../SVG";
 import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
 
+import { useIsMobile } from "@/hooks/useIsMobile";
+
 export const SearchInput: React.FC<{
   style?: StyleProp<ViewStyle>;
   borderRadius?: number;
   handleChangeText?: (e: string) => void;
 }> = ({ handleChangeText, borderRadius, style }) => {
+  const isMobile = useIsMobile();
   return (
     <LegacyTertiaryBox
       style={style}
@@ -31,7 +34,11 @@ export const SearchInput: React.FC<{
       fullWidth
     >
       <SVG
-        style={{ marginRight: layout.spacing_x1, maxWidth: 22 }}
+        style={{
+          marginRight: layout.spacing_x1,
+          maxWidth: 22,
+          marginLeft: isMobile ? layout.spacing_x2 : 0,
+        }}
         source={searchSVG}
       />
       <TextInput

diff --git a/packages/screens/Marketplace/MarketplaceScreen.tsx b/packages/screens/Marketplace/MarketplaceScreen.tsx
@@ -328,8 +328,11 @@ const PrettyPriceWithCurrency: React.FC<{
               style={[
                 isMobile ? fontSemibold9 : fontSemibold11,
                 {
-                  marginLeft: layout.spacing_x1,
+                  marginLeft: isMobile
+                    ? layout.spacing_x0_5
+                    : layout.spacing_x1,
                   color: neutral77,
+                  width: isMobile ? layout.spacing_x3 : "auto",
                 },
               ]}
               numberOfLines={1}
@@ -418,12 +421,15 @@ const CollectionRow: React.FC<{
       </View>
       <PrettyPriceWithCurrency
         data={rowData["tradeVolume"]}
-        style={{ flex: TABLE_COLUMNS.tradeVolume.flex }}
+        style={{
+          flex: TABLE_COLUMNS.tradeVolume.flex,
+        }}
       />
       <InnerCell
         style={{ flex: TABLE_COLUMNS.tradeVolumeDiff.flex }}
         textStyle={{
           color: tradeDiffColor,
+          marginLeft: isMobile ? layout.spacing_x1_5 : 0,
         }}
       >
         {tradeDiffText}