From 482a1cc4dd0774c2ee41e45d93138f416ef28d80 Mon Sep 17 00:00:00 2001
From: Freeze455 <baptiste.parmantier.pro@gmail.com>
Date: Wed, 6 Oct 2021 20:19:16 +0200
Subject: [PATCH] :iphone: Responsive desktop

---
 src/components/CodeDemo.vue                                  | 2 +-
 src/components/CtaSplitImage.vue                             | 2 +-
 src/components/Stats.vue                                     | 2 +-
 src/templates/modules/documentation/base/Getting-started.vue | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/CodeDemo.vue b/src/components/CodeDemo.vue
index 428ffcd..f8aff1e 100644
--- a/src/components/CodeDemo.vue
+++ b/src/components/CodeDemo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-5 sm:px-0 flex flex-col sm:flex-row space-y-5 sm:space-y-0 sm:space-x-5">
+  <div class="px-5 lg:px-0 flex flex-col sm:flex-row space-y-5 sm:space-y-0 sm:space-x-5">
     <div class="sm:w-1/2">
       <Collapse
         :items="collapseHighlighting"
diff --git a/src/components/CtaSplitImage.vue b/src/components/CtaSplitImage.vue
index 226dd10..177f715 100644
--- a/src/components/CtaSplitImage.vue
+++ b/src/components/CtaSplitImage.vue
@@ -6,7 +6,7 @@
         <div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
           <div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
             <div class="bg-blue-900 rounded-xl aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1.5">
-              <img class="rounded-md" src="../assets/discord-banner.jpg" alt="Workflow" />
+              <img class="rounded-md object-cover" src="../assets/discord-banner.jpg" alt="Workflow" />
             </div>
           </div>
         </div>
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
index 7801d30..37eb358 100644
--- a/src/components/Stats.vue
+++ b/src/components/Stats.vue
@@ -1,7 +1,7 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 <template>
   <div class="relative bg-gray-800 rounded-xl overflow-hidden">
-    <img class="absolute" src="../assets/discord-background.png" alt="Workflow" />
+    <img class="absolute w-full h-full object-cover" src="../assets/discord-background.png" alt="Workflow" />
     <div class="absolute inset-0 bg-black opacity-25"></div>
     <div class="relative z-10 max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
       <div class="max-w-4xl mx-auto text-center">
diff --git a/src/templates/modules/documentation/base/Getting-started.vue b/src/templates/modules/documentation/base/Getting-started.vue
index 9ee478f..898551b 100644
--- a/src/templates/modules/documentation/base/Getting-started.vue
+++ b/src/templates/modules/documentation/base/Getting-started.vue
@@ -26,13 +26,13 @@ onMounted(async () => {
   .markdown-viewer {
     display: block !important;
     & > p:nth-child(2), & > p:last-child, & > p:nth-last-child(3) {
-      @apply flex md:flex-wrap md:space-x-2 overflow-x-scroll;
+      @apply flex md:flex-wrap md:space-x-2 overflow-x-auto;
     }
     & > img {
       @apply md:w-1/3;
     }
     & > p {
-      @apply md:flex-wrap md:space-x-2 overflow-x-scroll;
+      @apply md:flex-wrap md:space-x-2 overflow-x-auto;
       code {
         @apply bg-red-500;
       }