fix: align social overflow icon on mobile (#5561)

align social overflow on mobile
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/collection/CollectionStats.tsx

@@ -21,6 +21,14 @@ const PercentChange = styled.div<{ isNegative: boolean }>`
   justify-content: center;
 `
 
+const MobileSocialsOverflowIcon = styled.div`
+  display: flex;
+  margin-left: 4px;
+  flex-direction: column;
+  justify-content: center;
+  height: 28px;
+`
+
 const MobileSocialsIcon = ({ children, href }: { children: ReactNode; href: string }) => {
   return (
     <Box
@@ -50,13 +58,13 @@ const MobileSocialsPopover = ({
 }) => {
   return (
     <>
-      <Row marginLeft="4" onClick={() => toggleCollectionSocials()}>
+      <MobileSocialsOverflowIcon onClick={toggleCollectionSocials}>
         {collectionSocialsIsOpen ? (
           <XMarkIcon width="28" height="28" fill={themeVars.colors.textSecondary} />
         ) : (
-          <EllipsisIcon width="28" height="28" fill={themeVars.colors.textSecondary} />
+          <EllipsisIcon width="28" height="20" fill={themeVars.colors.textSecondary} />
         )}
-      </Row>
+      </MobileSocialsOverflowIcon>
       {collectionSocialsIsOpen && (
         <Row
           position="absolute"