fix: styles and add responsiveness

src/features/profile/components/SocialMedia.tsx

@@ -58,6 +58,7 @@ export function SocialMedia() {
         justifyContent: 'center',
         alignItems: 'center',
         px: 2,
+        backgroundColor: 'background.paper',
       }}
     >
       <CardContainer
@@ -155,7 +156,6 @@ export function SocialMedia() {
         <Box
           sx={{
             width: '100%',
-            backgroundColor: 'background.paper',
             borderRadius: '8px',
             p: { xs: 1, sm: 2 },
           }}
@@ -170,8 +170,6 @@ export function SocialMedia() {
                 flexWrap: 'wrap',
                 py: 1,
                 gap: 1,
-                borderBottom:
-                  index !== emailList.length - 1 ? '1px solid #eee' : 'none',
               }}
             >
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -209,7 +207,6 @@ export function SocialMedia() {
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
-              // backgroundColor: 'background.paper',
               fontWeight: 'bold',
               fontSize: '16px',
               gap: 1,
@@ -258,7 +255,7 @@ export function SocialMedia() {
                 sx={{
                   textTransform: 'none',
                   borderRadius: '8px',
-                  backgroundColor: '#1976d2',
+                  // backgroundColor: '#1976d2',
                 }}
                 disabled={emailError || emailInput === ''}
               >