chore: Minor changes on download page (#7367)

* chore: mobile layout and skeleton sizes

* chore: layout on not-found page

* chore: mobile skeleton size

* chore: review updates

* chore: error page layout

Author: canerakdas

apps/site/app/[locale]/error.tsx

@@ -11,7 +11,7 @@ const ErrorPage: FC<{ error: Error }> = () => {
   const t = useTranslations();
 
   return (
-    <GlowingBackdropLayout>
+    <GlowingBackdropLayout kind="default">
       500
       <h1 className="special -mt-4 text-center">
         {t('layouts.error.internalServerError.title')}

apps/site/app/[locale]/not-found.tsx

@@ -12,7 +12,7 @@ const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
-    <GlowingBackdropLayout>
+    <GlowingBackdropLayout kind="default">
       404
       <h1 className="special -mt-4 text-center">
         {t('layouts.error.notFound.title')}

apps/site/components/Downloads/Release/BlogPostLink.tsx

@@ -3,16 +3,14 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useContext } from 'react';
 
-import LinkWithArrow from '@/components/Downloads/Release/LinkWithArrow';
+import Link from '@/components/Link';
 import { ReleaseContext } from '@/providers/releaseProvider';
 
 const BlogPostLink: FC<PropsWithChildren> = ({ children }) => {
   const { release } = useContext(ReleaseContext);
   const version = release.versionWithPrefix;
 
-  return (
-    <LinkWithArrow href={`/blog/release/${version}`}>{children}</LinkWithArrow>
-  );
+  return <Link href={`/blog/release/${version}`}>{children}</Link>;
 };
 
 export default BlogPostLink;

apps/site/components/Downloads/Release/PlatformDropdown.tsx

@@ -64,7 +64,7 @@ const PlatformDropdown: FC = () => {
       placeholder={t('layouts.download.dropdown.unknown')}
       ariaLabel={t('layouts.download.dropdown.installMethod')}
       onChange={platform => platform && release.setPlatform(platform)}
-      className="min-w-20"
+      className="min-w-28"
       inline={true}
     />
   );

apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx

@@ -30,12 +30,16 @@ const PrebuiltDownloadButtons: FC = () => {
     : '';
 
   return (
-    <div className="my-4 flex flex-wrap gap-2">
+    <div className="my-4 flex flex-col gap-2 sm:flex-row">
       <Skeleton
         loading={os === 'LOADING' || platform === ''}
         hide={OS_NOT_SUPPORTING_INSTALLERS.includes(os)}
       >
-        <Button href={installerUrl} size="small" className="min-w-56">
+        <Button
+          href={installerUrl}
+          size="small"
+          className="w-full min-w-56 sm:w-auto"
+        >
           <CloudArrowDownIcon />
 
           {t('layouts.download.buttons.installer', {
@@ -46,7 +50,11 @@ const PrebuiltDownloadButtons: FC = () => {
       </Skeleton>
 
       <Skeleton loading={os === 'LOADING' || platform === ''}>
-        <Button href={binaryUrl} size="small" className="min-w-56">
+        <Button
+          href={binaryUrl}
+          size="small"
+          className="w-full min-w-56 sm:w-auto"
+        >
           <CloudArrowDownIcon />
 
           {t('layouts.download.buttons.binary', {

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -111,7 +111,7 @@ const ReleaseCodeBox: FC = () => {
       )}
 
       <Skeleton loading={renderSkeleton}>
-        <CodeBox language={displayName} className="min-h-[16rem]">
+        <CodeBox language={displayName} className="min-h-[16.5rem]">
           <code dangerouslySetInnerHTML={{ __html: parsedSnippets }} />
         </CodeBox>
       </Skeleton>

apps/site/layouts/GlowingBackdrop.tsx

@@ -8,13 +8,12 @@ import WithNavBar from '@/components/withNavBar';
 import styles from './layouts.module.css';
 
 type GlowingBackdropLayoutProps = PropsWithChildren<{
-  kind?: 'home';
+  kind?: 'home' | 'default';
 }>;
 
-const GlowingBackdropLayout: FC<GlowingBackdropLayoutProps> = ({
-  kind = 'home',
-  children,
-}) => (
+const GlowingBackdropLayout: FC<
+  PropsWithChildren<GlowingBackdropLayoutProps>
+> = ({ kind = 'home', children }) => (
   <>
     <WithNavBar />
     <div className={styles.centeredLayout}>