fix: issue of CollectionScreen UI break in mobile view

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

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/components/collections/CollectionHeader.tsx b/packages/components/collections/CollectionHeader.tsx
@@ -249,7 +249,7 @@ export const CollectionHeader: React.FC<{
               <SocialButtonSecondary
                 text="Explorer"
                 iconSvg={etherscanSVG}
-                style={{ marginRight: 12 }}
+                style={{ marginRight: 12, height: 46 }}
                 onPress={() => {
                   const url = contractExplorerLink(
                     network?.id,
@@ -261,6 +261,7 @@ export const CollectionHeader: React.FC<{
               <SocialButtonSecondary
                 text="Share"
                 iconSvg={shareSVG}
+                style={{ marginRight: 12, height: 46 }}
                 onPress={onShare}
               />
             </View>

diff --git a/packages/components/collections/CollectionSocialButtons.tsx b/packages/components/collections/CollectionSocialButtons.tsx
@@ -8,18 +8,27 @@ import websiteSVG from "../../../assets/icons/website.svg";
 import { CollectionInfo } from "../../utils/collection";
 import { SocialButton } from "../buttons/SocialButton";
 
+import { useIsMobile } from "@/hooks/useIsMobile";
+import { layout } from "@/utils/style/layout";
+
 export const CollectionSocialButtons: React.FC<{
   collectionInfo: CollectionInfo;
   hideMintButton?: boolean;
 }> = ({ collectionInfo, hideMintButton }) => {
+  const isMobile = useIsMobile();
   const {
     discord: discordLink,
     twitter: twitterLink,
     website: websiteLink,
     isMintable,
   } = collectionInfo;
 
-  const style: ViewStyle = { marginRight: 12, marginVertical: 2 };
+  const style: ViewStyle = {
+    marginRight: 12,
+    marginVertical: isMobile ? layout.spacing_x0_5 : 0,
+    height: 46,
+  };
+
   return (
     <>
       {isMintable && !hideMintButton && (