chore: responsive improvements

Author: vallemar

src/components/Body.vue

@@ -70,7 +70,12 @@ pluginService.findAll().then((plugins) => {
 </script>
 
 <template>
-  <Loading message="Generating project" :show="loading"></Loading>
+  <Loading
+    :full="true"
+    message="Generating project"
+    :show="loading"
+    position="fixed"
+  ></Loading>
   <div class="px-3 my-8 mb-16">
     <a ref="refDownload"></a>
     <div class="width-content grid lg:grid-cols-2 grid-cols-1">

src/components/ItemPlugin.vue

@@ -34,11 +34,14 @@ const formatDate = (date: string) => {
         <span class="text-lg font-bold">
           {{ plugin.name }}
         </span>
-        <span class="text-base"> Updated: {{ formatDate(plugin.date) }} </span>
+        <span class="text-base text-right">
+          <span class="hidden md:inline-block">Updated:</span>
+          {{ formatDate(plugin.date) }}
+        </span>
       </div>
-      <span class="text-base mt-1">
+      <div class="text-base mt-2">
         {{ plugin.description }}
-      </span>
+      </div>
     </div>
     <div class="flex justify-between items-center mt-3">
       <span>Last month download {{ plugin.downloadStats.lastMonth }}</span>
@@ -53,7 +56,7 @@ const formatDate = (date: string) => {
           <span class="mdi mdi-github"></span>
         </a>
         <a
-          class="px-3 rounded-full"
+          class="px-3 rounded-full truncate overflow-hidden"
           style="background: #d55553"
           :href="plugin.links.npm"
           target="_blank"

src/components/Loading.vue

@@ -55,11 +55,11 @@ const state = reactive({ count: 0 });
 
 <style scoped>
 .content-loading {
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/Modal.vue

@@ -5,8 +5,8 @@
         <div class="modal-overlay" id="modal-overlay"></div>
         <div
           ref="refModal"
-          class="modal rounded-2xl bg-light"
-          :class="{ 'full-screen': fullScreen }"
+          class="modal bg-light"
+          :class="[fullScreen ? 'full-screen' : 'rounded-2xl']"
           id="modal"
           :style="{ height: fullScreen ? '100%' : maxHeight }"
         >