Merge pull request #862 from topcoder-platform/MP-336_social-links-modal-mobile

MP-336 - fix mobile issues for social links -> dev

Author: vas3a

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/LinkEntry/LinkEntry.module.scss

@@ -37,8 +37,7 @@
         }
 
         svg {
-            width: 24px;
-            height: 24px;
+            @include icon-xxl;
         }
     }
 }
@@ -47,6 +46,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    flex: 1 1;
 
     small {
         font-size: 11px;
@@ -60,3 +60,7 @@
         word-break: break-all;
     }
 }
+
+.btnsWrap {
+    flex: 0 0 auto;
+}

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/LinkEntry/LinkEntry.tsx

@@ -43,7 +43,7 @@ const LinkEntry: FC<LinkEntryProps> = props => {
                     <small>{props.link.name}</small>
                     <p>{props.link.url}</p>
                 </div>
-                <div>
+                <div className={styles.btnsWrap}>
                     <Button
                         className={styles.button}
                         size='lg'

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/LinkForm/LinkForm.module.scss

@@ -24,14 +24,21 @@
     &>div:nth-child(1) {
         margin-right: $sp-2;
         min-width: 150px;
+        @include ltemd {
+            min-width: 0;
+        }
     }
 
     &>div:nth-child(2) {
         flex: 1;
-        margin-right: $sp-2;
     }
     &>button {
         margin-bottom: $sp-45;
+
+        svg {
+            @include icon-xxl;
+        }
+
         &.button {
             margin-left: $sp-2;
             padding-left: $sp-2;