second iteration of the new sidebar

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import NavHeader from "@app/components/navigation/NavHeader";
 import { Button, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
@@ -177,10 +176,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   };
 
   return (
-    <div className="container mx-auto max-w-7xl px-8 pb-12 text-white">
-      <div className="ml-4">
-        <NavHeader pageName={t("integrations.title")} isProjectRelated />
-      </div>
+    <div className="container mx-auto max-w-7xl pb-12 text-white">
       <IntegrationsSection
         isLoading={isIntegrationLoading}
         integrations={integrations}

frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -37,10 +37,7 @@ export const CloudIntegrationSection = ({
         <h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
         <p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
       </div>
-      <div
-        className="mx-6 grid grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))" }}
-      >
+      <div className="mx-6 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
         {isLoading &&
           Array.from({ length: 12 }).map((_, index) => (
             <Skeleton className="h-32" key={`cloud-integration-skeleton-${index + 1}`} />

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -45,10 +45,12 @@ export const IntegrationsSection = ({
         </div>
       )}
       {!isLoading && !integrations.length && (
-        <EmptyState
-          className="mx-6 rounded-md border border-mineshaft-700 pt-8 pb-4"
-          title="No integrations found. Click on one of the below providers to sync secrets."
-        />
+        <div className="mx-6">
+          <EmptyState
+            className="rounded-md border border-mineshaft-700 pt-8 pb-4"
+            title="No integrations found. Click on one of the below providers to sync secrets."
+          />
+        </div>
       )}
       {!isLoading && (
         <div className="flex flex-col space-y-4 p-6 pt-0">