refactor(components): change the css style for the top organizations

Author: thread-koder

components/TopOrganizations.vue

@@ -7,10 +7,7 @@
       </div>
       <div class="filter-component">
         <OrganizationsFilter class="lg:mt-0 lg:order-2" />
-        <Organizations
-          :organizations="organizations"
-          class="lg:grow lg:pl-6"
-        />
+        <Organizations :organizations="organizations" class="lg:grow" />
       </div>
     </article>
   </div>
@@ -28,7 +25,7 @@ export default {
   },
   async fetch() {
     const response = await this.$axios.get(
-      `/v1/orgs?sort_by=${this.orgs_sortBy}`
+      `/v1/orgs?sort_by=${this.orgs_sortBy}`,
     )
     this.$store.commit('setOrgs', response.data.orgs)
     this.$store.commit('setPageCount', response.data.totalPages)
@@ -47,15 +44,15 @@ export default {
   background-color: #edeeef;
 }
 .divider {
-  @apply w-10 lg:w-14 border-t-2 border-black;
+  @apply w-10 lg:w-14 border-t-2 border-black pb-4;
 }
 .header-title {
   font-family: 'IBM Mono';
   font-size: 1.7rem;
-  @apply font-normal ml-8 pt-16 lg:pt-24 md:ml-12 lg:ml-20 lg:text-4xl lg:font-light 2xl:ml-24;
+  @apply font-normal pt-16 lg:pt-24  lg:text-4xl lg:font-light;
 }
 
 .filter-component {
-  @apply lg:flex mx-auto mt-10 lg:mt-20 lg:w-11/12;
+  @apply lg:flex mt-10 lg:mt-20;
 }
 </style>