fix: enhance user info layout with responsive design adjustments

Author: medyo

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -101,6 +101,7 @@ Select styles
   padding: 20px 0px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   border-bottom: 1px solid var(--card-content-divider);
 
   .userImage {
@@ -109,6 +110,16 @@ Select styles
     border-radius: 100%;
     align-self: flex-start;
   }
+  .userDetails {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+  .userInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
   .userInfos {
     flex: 1;
     display: flex;
@@ -214,3 +225,18 @@ Select styles
 .streaks .checked:is(:has(+ .checked))::before {
   background-color: #18bc2d;
 }
+
+@media (max-width: 768px) {
+  .settingContent {
+    margin-top: 6px;
+  }
+  .settingRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .userContent {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}

src/features/settings/components/UserSettings/UserInfo.tsx

@@ -44,21 +44,24 @@ export const UserInfo = () => {
         onClose={() => setShowLogout(false)}
         onConfirm={logout}
       />
-      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
-      <div className="userInfos">
-        <div className="userName">{user.name}</div>
-        <div className="sub">
-          {providerId == 'github.com' ? (
-            <FaGithub size={18} />
-          ) : providerId == 'google.com' ? (
-            <FcGoogle size={18} />
-          ) : null}
-          Connected with <span className="capitalize">{providerName}</span>
-        </div>
-        <div className="actions">
-          <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
-            Logout
-          </Button>
+
+      <div className="userDetails">
+        {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
+        <div className="userInfo">
+          <div className="userName">{user.name}</div>
+          <div className="sub">
+            {providerId == 'github.com' ? (
+              <FaGithub size={18} />
+            ) : providerId == 'google.com' ? (
+              <FcGoogle size={18} />
+            ) : null}
+            Connected with <span className="capitalize">{providerName}</span>
+          </div>
+          <div className="actions">
+            <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
+              Logout
+            </Button>
+          </div>
         </div>
       </div>