fix: Changelog trigger and minor visual bugs (#6567)

fix: changelog index and mobile issues

Author: canerakdas

components/Common/Badge/index.module.css

@@ -20,6 +20,7 @@
       border
       px-2.5
       py-0.5
+      text-center
       text-white;
   }
 

components/Downloads/ChangelogModal/index.module.css

@@ -89,5 +89,10 @@
     pre {
       @apply overflow-auto;
     }
+
+    code,
+    a {
+      @apply break-words;
+    }
   }
 }

components/Downloads/Release/ChangelogLink.tsx

@@ -10,9 +10,14 @@ const ChangelogLink: FC<PropsWithChildren> = ({ children }) => {
   const { modalOpen, setModalOpen } = useContext(ReleaseContext);
 
   return (
-    <button onClick={() => setModalOpen(!modalOpen)}>
-      <LinkWithArrow className="cursor-pointer">{children}</LinkWithArrow>
-    </button>
+    <LinkWithArrow asChild>
+      <button
+        className="anchor cursor-pointer"
+        onClick={() => setModalOpen(!modalOpen)}
+      >
+        {children}
+      </button>
+    </LinkWithArrow>
   );
 };
 

components/Downloads/Release/LinkWithArrow.tsx

@@ -1,16 +1,29 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
-import type { ComponentProps, FC } from 'react';
+import type { SlotProps } from '@radix-ui/react-slot';
+import { Slot } from '@radix-ui/react-slot';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import Link from '@/components/Link';
 
-const LinkWithArrow: FC<ComponentProps<typeof Link>> = ({
+type LinkWithArrowProps =
+  | ({ asChild?: false } & ComponentProps<typeof Link>)
+  | ({ asChild: true } & SlotProps);
+
+const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = ({
   children,
+  asChild = false,
   ...props
-}) => (
-  <Link {...props}>
-    {children}
-    <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />
-  </Link>
-);
+}) => {
+  const Comp = asChild ? Slot : Link;
+
+  return (
+    <Comp {...props}>
+      <>
+        {children}
+        <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />
+      </>
+    </Comp>
+  );
+};
 
 export default LinkWithArrow;

package-lock.json

@@ -49,6 +49,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@savvywombat/tailwindcss-grid-areas": "~4.0.0",

package.json

@@ -75,18 +75,19 @@ main {
       dark:text-white;
   }
 
-  a {
+  a,
+  .anchor {
     @apply text-green-600
       dark:text-green-400
-      xs:underline;
+      xs:font-semibold;
 
     &:hover {
       @apply text-green-900
         dark:text-green-300;
     }
 
     &[role='button'] {
-      @apply xs:no-underline;
+      @apply xs:font-regular;
     }
 
     &:has(code) {