Mobile tweaks app store (#4537)

apps/web/components/v2/apps/CalendarListContainer.tsx

@@ -163,7 +163,7 @@ function ConnectedCalendarsList(props: Props) {
                     logo={item.integration.logo}
                     description={item.primary?.externalId || "No external Id"}
                     actions={
-                      <div className="w-32">
+                      <div className="flex w-32 justify-end">
                         <DisconnectIntegration
                           credentialId={item.credentialId}
                           trashIcon

apps/web/pages/v2/apps/installed/[category].tsx

@@ -100,7 +100,7 @@ const IntegrationsList = ({ data }: { data: inferQueryOutput<"viewer.integration
           logo={item.logo}
           description={item.description}
           actions={
-            <div className="flex w-32 justify-center">
+            <div className="flex w-32 justify-end">
               <ConnectOrDisconnectIntegrationButton
                 credentialIds={item.credentialIds}
                 type={item.type}

packages/ui/v2/core/apps/AllApps.tsx

@@ -61,7 +61,7 @@ export default function AllApps({ apps }: AllAppsPropsType) {
 
   return (
     <div className="mb-16">
-      <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-center">
+      <div className="relative mb-4 flex flex-col justify-between lg:flex-row lg:items-center">
         <h2 className="text-lg font-semibold text-gray-900 ">
           {t("explore_apps", {
             category:
@@ -70,7 +70,7 @@ export default function AllApps({ apps }: AllAppsPropsType) {
           })}
         </h2>
         {leftVisible && (
-          <div className="absolute left-1/2 flex">
+          <div className="absolute top-[34px] flex lg:left-1/2 lg:top-0">
             <div className="flex h-12 w-5 items-center justify-end bg-white">
               <ChevronLeft className="h-4 w-4 text-gray-500" />
             </div>
@@ -112,7 +112,7 @@ export default function AllApps({ apps }: AllAppsPropsType) {
           ))}
         </ul>
         {rightVisible && (
-          <div className="absolute right-12 flex">
+          <div className="absolute right-0 top-[34px] flex lg:right-12 lg:top-0">
             <div className="flex h-12 w-5 bg-gradient-to-r from-transparent to-white" />
             <div className="flex h-12 w-5 items-center justify-end bg-white">
               <ChevronRight className="h-4 w-4 text-gray-500" />

packages/ui/v2/core/layouts/InstalledAppsLayout.tsx

@@ -47,7 +47,7 @@ export default function InstalledAppsLayout({
   }
   return (
     <Shell {...rest}>
-      <div className="mt-10 flex flex-col p-2 md:p-0 xl:flex-row">
+      <div className="flex flex-col p-2 md:p-0 xl:flex-row">
         <div className="hidden xl:block">
           <VerticalTabs tabs={actualTabs} sticky />
         </div>