From f966d2fd4bd046a0d09b31cff02e0e47faef5e24 Mon Sep 17 00:00:00 2001
From: HJfod <60038575+HJfod@users.noreply.github.com>
Date: Mon, 4 Mar 2024 22:40:37 +0200
Subject: [PATCH] fix the main buttons on mobile

---
 src/components/Button.astro | 9 ++++++---
 src/pages/index.astro       | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 9cb25d8..e739ad2 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,11 +1,11 @@
 ---
-const { link, style } = Astro.props;
+const { link, style, solidWidth } = Astro.props;
 const url = link.startsWith('https') || link.startsWith('#') ? link : `${import.meta.env.BASE_URL}${link}`;
-const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : ''}`;
+const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : ''} ${solidWidth === 'true' ? 'is-solid-width' : ''}`;
 ---
 
 <a href={url} class={classList}>
-    <slot name="pre-icon"></slot>
+    <slot name="pre-icon">{solidWidth === 'true' ? <span></span> : ''}</slot>
     <span class="content"><slot /></span>
     <slot name="post-icon" />
 </a>
@@ -30,6 +30,9 @@ const classList = `${style} ${Astro.slots.has('post-icon') ? 'has-post-icon' : '
     a.has-post-icon {
         grid-template-columns: 1fr 1.75rem;
     }
+    a.is-solid-width {
+        grid-template-columns: 1.75rem 7rem 1.75rem;
+    }
     a:hover {
         @apply
             bg-tertiary-light
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b2256b..ea3d064 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -43,11 +43,11 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
         <div class="h-8" />
 
         <ButtonRow reverseOnMobile="true">
-            <Button link="#content">
+            <Button link="#content" solidWidth="true">
                 <ArrowDownIcon slot="pre-icon" />
                 About
             </Button>
-            <Button link="/install" style="alt">
+            <Button link="/install" style="alt" solidWidth="true">
                 <ArrowRightIcon slot="post-icon" />
                 Install
             </Button>