diff --git a/packages/components/collections/CollectionHeader.tsx b/packages/components/collections/CollectionHeader.tsx index ab2cf45630..c48b5a36e9 100644 --- a/packages/components/collections/CollectionHeader.tsx +++ b/packages/components/collections/CollectionHeader.tsx @@ -249,7 +249,7 @@ export const CollectionHeader: React.FC<{ { const url = contractExplorerLink( network?.id, @@ -261,6 +261,7 @@ export const CollectionHeader: React.FC<{ diff --git a/packages/components/collections/CollectionSocialButtons.tsx b/packages/components/collections/CollectionSocialButtons.tsx index 13f03338c2..bc03af5e5c 100644 --- a/packages/components/collections/CollectionSocialButtons.tsx +++ b/packages/components/collections/CollectionSocialButtons.tsx @@ -8,10 +8,14 @@ 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, @@ -19,7 +23,12 @@ export const CollectionSocialButtons: React.FC<{ 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 && (