add new css class that auto wrap to allow more share links

client/scss/all.scss

@@ -35,6 +35,7 @@
 @import '~row/_row';
 @import '~vertical-split/_vertical-split';
 @import '~tooltip/_tooltip';
+@import '~social-share-link/_social-share-link';
 
 @import '~channel-claims-display/_channel-claims-display';
 @import '~dropzone/_dropzone';

client/scss/social-share-link/_social-share-link.scss

@@ -0,0 +1,10 @@
+.social-share-link {
+  flex-wrap: wrap;
+  margin-right: -0.5em;
+  margin-left: -0.5em;
+}
+
+.social-share-link > a{
+  padding-right:0.5em;
+  padding-left:0.5em;
+}

client/src/components/AssetShareButtons/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import SpaceBetween from '@components/SpaceBetween';
+import SocialShareLink from '@components/SocialShareLink';
 
 const AssetShareButtons = ({ host, name, shortId }) => {
   return (
-    <SpaceBetween >
+    <SocialShareLink >
       <a
         className='link--primary'
         target='_blank'
@@ -39,7 +39,7 @@ const AssetShareButtons = ({ host, name, shortId }) => {
       >
         mastodon
       </a>
-    </SpaceBetween>
+    </SocialShareLink>
   );
 };
 

client/src/components/SocialShareLink/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+class SocialShareLink extends React.Component {
+  render () {
+    return (
+      <div className={'space-between social-share-link'}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default SocialShareLink;