From 151331770e96e08f775f3d03f24b8b9260ab91ca Mon Sep 17 00:00:00 2001
From: Mosab Ibrahim <miaababikir@gmail.com>
Date: Tue, 5 May 2020 00:41:58 +0200
Subject: [PATCH] Responsive fixes

---
 src/components/Master.vue   | 6 +++---
 src/views/ViewComponent.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Master.vue b/src/components/Master.vue
index 8e19555..9438fc2 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -2,12 +2,12 @@
     <div class="min-h-screen container mx-auto px-6">
 
         <div class="container mx-auto px-6 py-16 text-center">
-            <h1 class="text-2xl sm:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
+            <h1 class="text-2xl md:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
             <input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700" type="text" placeholder="search..">
         </div>
 
         <div class="flex">
-            <div class="hidden sm:w-64">
+            <div class="hidden md:w-64 md:block">
                 <h2 class="text-gray-800 text-2xl font-semibold">Categories</h2>
                 <ul class="flex flex-col mt-4">
                     <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">All Components</li>
@@ -17,7 +17,7 @@
                     <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Layouts</li>
                 </ul>
             </div>
-            <div class="w-full sm:flex-1">
+            <div class="w-full md:flex-1">
                 <div class="container mx-auto px-6">
                     <div class="pb-8">
                         <h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
diff --git a/src/views/ViewComponent.vue b/src/views/ViewComponent.vue
index 5bdfd6c..19a69b8 100644
--- a/src/views/ViewComponent.vue
+++ b/src/views/ViewComponent.vue
@@ -2,7 +2,7 @@
     <div class="bg-gray-300 border rounded-md overflow-hidden">
         <div class="bg-white p-4 border-b">
             <div class="flex justify-between items-center">
-                <div class="text-gray-700 font-medium text-sm sm:text-lg">{{ name }}</div>
+                <div class="text-gray-700 font-medium text-sm md:text-lg">{{ name }}</div>
                <div>
                     <button @click="viewCode =! viewCode" class="mx-4 bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">