From e926f349a7ef6d61902622aee9f178e1953bcf13 Mon Sep 17 00:00:00 2001
From: Fran <fran@xyvs.io>
Date: Tue, 16 Jan 2024 11:10:32 -0500
Subject: [PATCH] fix: Responsive Design

---
 services/frontend/src/App.vue             | 2 +-
 services/frontend/src/components/Home.vue | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/services/frontend/src/App.vue b/services/frontend/src/App.vue
index 8efb2b8..323e238 100644
--- a/services/frontend/src/App.vue
+++ b/services/frontend/src/App.vue
@@ -13,7 +13,7 @@ const setHome = (value: boolean) => {
 </script>
 
 <template>
-    <div class="min-h-screen w-full bg-slate-100 flex flex-col justify-between items-center p-16 gap-5 text-neutral-700">
+    <div class="min-h-screen w-full bg-slate-100 flex flex-col justify-between items-center p-4 md:p-16 gap-5 text-neutral-700">
         <Header @setHome="setHome" />
         <Home v-if="isHome" />
         <About v-else />
diff --git a/services/frontend/src/components/Home.vue b/services/frontend/src/components/Home.vue
index 25885f9..62791b1 100644
--- a/services/frontend/src/components/Home.vue
+++ b/services/frontend/src/components/Home.vue
@@ -33,8 +33,8 @@ const getFilenameData = () => {
 </script>
 
 <template>
-    <div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-12 pb-6">
-        <div class="space-y-12 px-12">
+    <div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-6 md:pt-12 pb-6 md:pb-6">
+        <div class="space-y-12 px-4 md:px-12">
             <div class="flex flex-col items-center justify-center gap-4">
                 <h2 class="text-4xl font-semibold">
                     guessit
@@ -61,8 +61,11 @@ const getFilenameData = () => {
                 </div>
             </div>
         </div>
-        <div class="text-left text-sm rounded px-4">
+        <div class="hidden md:block text-left text-sm px-4">
             <highlightjs :code="code" ref="codeRef" />
         </div>
+        <div class="md:hidden text-center px-4">
+            Sorry, this section is not available on mobile devices.
+        </div>
     </div>
 </template>