feat: teams modal wrapper

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