Fix: Make links page responsive on mobile view (EddieHubCommunity#9907)

components/user/UserLink.js

@@ -41,17 +41,22 @@ export default function UserLink({
       href={`${BASE_URL}/api/profiles/${username}/links/${link._id}`}
       target="_blank"
       rel="noopener noreferrer"
-      className={classNames(
+      className={
+        classNames(
         animations[link.animation] === animations.iconGlow && "z-0",
         animations[link.animation] !== animations.glow &&
           "dark:hover:bg-secondary-low/40 hover:bg-secondary-low/40",
         isEnabled && getLinkAnimation.get(animations[link.animation]),
-        "relative rounded-full border border-primary-medium-low dark:border-primary-medium-low dark:hover:border-[color:var(--hover-color)] hover:border-[color:var(--hover-color)] hover:shadow-xl p-4 my-2 w-full content-start flex flex-row gap-4 items-center dark:bg-primary-medium grow",
-      )}
+        "relative rounded-full border border-primary-medium-low dark:border-primary-medium-low dark:hover:border-[color:var(--hover-color)] hover:border-[color:var(--hover-color)] hover:shadow-xl p-4 my-2 w-full content-start flex flex-col md:flex-row gap-2 items-center dark:bg-primary-medium grow",
+      )
+
+    }
       style={{
         "--hover-color": colors[link.icon],
       }}
     >
+
+      <div className="grow flex items-center space-x-4">
       <span className="relative">
         <span
           style={{ color: colors[link.icon] }}
@@ -66,6 +71,9 @@ export default function UserLink({
         )}
       </span>
       <span className="grow">{link.name}</span>
+      </div>
+
+      <div className="flex items-center space-x-4">
       {manage && link.isPinned && (
         <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-secondary-low text-secondary-high-high ring-1 ring-inset ring-secondary-high/10">
           Pinned
@@ -89,6 +97,8 @@ export default function UserLink({
         </span>
       )}
       {manage && <Bulb isEnabled={isEnabled} />}
+      </div>
+
     </Link>
   );