From 05a7babd56a9ca180b93247da22e01ac45335ecf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Thu, 24 Mar 2022 12:46:36 -0700
Subject: [PATCH] Fixes/app store mobile (#2271)

* Grid fixes for mobile

* Adds missing NavTabs to installed apps page
---
 apps/web/components/apps/AllApps.tsx          |  2 +-
 apps/web/pages/apps/categories/[category].tsx |  2 +-
 apps/web/pages/apps/installed.tsx             | 17 ++++++++++-------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/apps/AllApps.tsx b/apps/web/components/apps/AllApps.tsx
index 0b760d25..31e6eb53 100644
--- a/apps/web/components/apps/AllApps.tsx
+++ b/apps/web/components/apps/AllApps.tsx
@@ -9,7 +9,7 @@ export default function AllApps({ apps }: { apps: App[] }) {
   return (
     <div className="mb-16">
       <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
-      <div className="grid-col-1 grid gap-3 md:grid-cols-3">
+      <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
         {apps.map((app) => (
           <AppCard
             key={app.name}
diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx
index 0e0b0dc4..08f07aae 100644
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@@ -28,7 +28,7 @@ export default function Apps({ appStore }: InferGetStaticPropsType<typeof getSta
         </div>
         <div className="mb-16">
           <h2 className="mb-2 text-lg font-semibold text-gray-900">All {router.query.category} apps</h2>
-          <div className="grid grid-cols-3 gap-3">
+          <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
             {appStore.map((app) => {
               return (
                 app.category === router.query.category && (
diff --git a/apps/web/pages/apps/installed.tsx b/apps/web/pages/apps/installed.tsx
index 54ef5aa0..baab06da 100644
--- a/apps/web/pages/apps/installed.tsx
+++ b/apps/web/pages/apps/installed.tsx
@@ -15,6 +15,7 @@ import { HttpError } from "@lib/core/http/error";
 import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
+import AppsShell from "@components/AppsShell";
 import { ClientSuspense } from "@components/ClientSuspense";
 import { List, ListItem, ListItemText, ListItemTitle } from "@components/List";
 import Loader from "@components/Loader";
@@ -307,13 +308,15 @@ export default function IntegrationsPage() {
 
   return (
     <Shell heading={t("installed_apps")} subtitle={t("manage_your_connected_apps")}>
-      <ClientSuspense fallback={<Loader />}>
-        <IntegrationsContainer />
-        <CalendarListContainer />
-        <WebhookListContainer title={t("webhooks")} subtitle={t("receive_cal_meeting_data")} />
-        <IframeEmbedContainer />
-        <Web3Container />
-      </ClientSuspense>
+      <AppsShell>
+        <ClientSuspense fallback={<Loader />}>
+          <IntegrationsContainer />
+          <CalendarListContainer />
+          <WebhookListContainer title={t("webhooks")} subtitle={t("receive_cal_meeting_data")} />
+          <IframeEmbedContainer />
+          <Web3Container />
+        </ClientSuspense>
+      </AppsShell>
     </Shell>
   );
 }