From 6c40acc1f9cffa21847f66d787b059b54e269e2b Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 10 Nov 2022 16:57:58 +0600
Subject: [PATCH] fixed UIButtons

---
 components/bio/BioHeading.vue   |  5 +++--
 components/home/HomeHeader.vue  |  7 ++++---
 components/ui/UiButtonGroup.vue | 10 +++++++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/bio/BioHeading.vue b/components/bio/BioHeading.vue
index b038976..6dd62a9 100644
--- a/components/bio/BioHeading.vue
+++ b/components/bio/BioHeading.vue
@@ -19,7 +19,7 @@
 
       <UiButtonGroup :class="$style.buttons">
         <UiActionButton href="/contacts" variant="primary">
-          Contact me
+          Contact&nbsp;me
           <template v-slot:suffix>
             <IconsSend width="22" height="22" fill="currentColor" />
           </template>
@@ -30,7 +30,7 @@
           target="_blank"
           variant="outline"
         >
-          Visit my Github
+          Visit&nbsp;my&nbsp;Github
           <template v-slot:suffix>
             <IconsGithub width="22" height="22" fill="currentColor" />
           </template>
@@ -91,6 +91,7 @@
 
   @include desktop {
     margin-top: 20px;
+    justify-content: center;
   }
 }
 </style>
diff --git a/components/home/HomeHeader.vue b/components/home/HomeHeader.vue
index dc467e7..9c47a44 100644
--- a/components/home/HomeHeader.vue
+++ b/components/home/HomeHeader.vue
@@ -24,14 +24,14 @@
 
         <UiButtonGroup :class="$style.buttons">
           <UiActionButton href="/contacts" variant="primary">
-            Contact me
+            Contact&nbsp;me
             <template v-slot:suffix>
               <IconsSend width="22" height="22" fill="currentColor" />
             </template>
           </UiActionButton>
 
           <UiActionButton href="/about" variant="outline">
-            View Portfolio
+            View&nbsp;Portfolio
             <template v-slot:suffix>
               <IconsBook width="22" height="22" fill="currentColor" />
             </template>
@@ -119,7 +119,8 @@
 .buttons {
   margin-top: 40px;
 
-  @include desktop {
+  @include tablet {
+    justify-content: center;
     margin-top: 20px;
   }
 }
diff --git a/components/ui/UiButtonGroup.vue b/components/ui/UiButtonGroup.vue
index ccf69c3..0427ca3 100644
--- a/components/ui/UiButtonGroup.vue
+++ b/components/ui/UiButtonGroup.vue
@@ -7,9 +7,13 @@
 <script lang="ts" setup></script>
 
 <style lang="scss" module>
+@import "@/assets/css/main.scss";
+
 .buttons {
-  & > * {
-    margin: 0 15px 15px 0;
-  }
+  display: grid;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  grid-template-columns: repeat(auto-fit, minmax(180px, auto));
 }
 </style>