feat: teams modal wrapper

packages/hoppscotch-app/components/teams/Modal.vue

@@ -0,0 +1,26 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <Teams :modal="true" />
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>

packages/hoppscotch-app/components/teams/index.vue

@@ -26,7 +26,8 @@
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
-        class="grid gap-4 sm:grid-cols-3 md:grid-cols-4"
+        class="grid gap-4"
+        :class="modal ? 'grid-cols-1' : 'sm:grid-cols-3 md:grid-cols-4'"
       >
         <TeamsTeam
           v-for="(team, index) in myTeams.data.right.myTeams"
@@ -69,6 +70,10 @@ import { useGQLQuery } from "~/helpers/backend/GQLClient"
 import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
 import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
+defineProps<{
+  modal: boolean
+}>()
+
 const showModalAdd = ref(false)
 const showModalEdit = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out