Merge branch 'main' of https://github.com/Infisical/infisical into chore/unify-license-key

2026-09-22 13:39:35 +00:00 · 2025-11-17 23:22:40 +05:30
parent 44f2cedbbd 62494df119
commit df7aeecf50
29 changed files with 279 additions and 343 deletions
--- a/frontend/public/locales/en/translations.json
+++ b/frontend/public/locales/en/translations.json
@@ -41,7 +41,6 @@
  "common": {
    "head-title": "{{title}} | Infisical",
    "error_project-already-exists": "A project with this name already exists.",
-    "no-mobile": " To use Infisical, please log in through a device with larger dimensions. ",
    "email": "Email",
    "password": "Password",
    "first-name": "First Name",
--- a/frontend/public/locales/es/translations.json
+++ b/frontend/public/locales/es/translations.json
@@ -41,7 +41,6 @@
  "common": {
    "head-title": "{{title}} | Infisical",
    "error_project-already-exists": "Ya existe un proyecto con este nombre.",
-    "no-mobile": "Para usar Infisical, inicia sesión con un dispositivo de mayores dimesiones.",
    "email": "Correo electrónico",
    "password": "Contraseña",
    "first-name": "Nombre",
--- a/frontend/public/locales/fr/translations.json
+++ b/frontend/public/locales/fr/translations.json
@@ -41,7 +41,6 @@
  "common": {
    "head-title": "{{title}} | Infisical",
    "error_project-already-exists": "Un projet avec ce nom existe déjà.",
-    "no-mobile": " Pour utiliser Infisical, veuillez vous connecter avec un appareil avec des dimensions plus grandes. ",
    "email": "Email",
    "password": "Mot de passe",
    "first-name": "Prénom",
--- a/frontend/public/locales/ko/translations.json
+++ b/frontend/public/locales/ko/translations.json
@@ -30,7 +30,6 @@
  "common": {
    "head-title": "{{title}} | Infisical",
    "error_project-already-exists": "동일한 이름을 가진 프로젝트가 이미 존재해요.",
-    "no-mobile": " Infisical을 사용하려면, 큰 화면을 가진 디바이스로 로그인하여 주세요.",
    "email": "메일",
    "password": "비밀번호",
    "first-name": "이름",
--- a/frontend/public/locales/pt-BR/translations.json
+++ b/frontend/public/locales/pt-BR/translations.json
@@ -41,7 +41,6 @@
  "common": {
    "head-title": "{{title}} | Infisical",
    "error_project-already-exists": "Já exite um projeto com este nome.",
-    "no-mobile": "Para usar o Infisical, faça o login através de um dispositivo com dimensões maiores.",
    "email": "Email",
    "password": "Senha",
    "first-name": "Primeiro Nome",
--- a/frontend/public/locales/tr/translations.json
+++ b/frontend/public/locales/tr/translations.json
@@ -41,7 +41,6 @@
  "common": {
    "head-title": "{{title}} | Infisical",
    "error_project-already-exists": "Bu isimle bir proje zaten mevcut.",
-    "no-mobile": " Infisical'ı kullanmak için, lütfen daha büyük boyutlara sahip bir cihaz üzerinden giriş yapın. ",
    "email": "Email",
    "password": "Şifre",
    "first-name": "Adınız",
--- a/frontend/src/components/project/ProjectOverviewChangeSection.tsx
+++ b/frontend/src/components/project/ProjectOverviewChangeSection.tsx
@@ -76,8 +76,8 @@ export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) =

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
+      <div className="justify-betweens mb-8 flex flex-wrap gap-2">
+        <h2 className="flex-1 text-xl font-medium text-mineshaft-100">Project Overview</h2>
        <div className="space-x-2">
          <Button
            variant="outline_bg"
--- a/frontend/src/layouts/AdminLayout/AdminLayout.tsx
+++ b/frontend/src/layouts/AdminLayout/AdminLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Outlet } from "@tanstack/react-router";

 import { Banner } from "@app/components/page-frames/Banner";
@@ -15,7 +12,6 @@ import { InsecureConnectionBanner } from "../OrganizationLayout/components/Insec
 import { AdminNavBar } from "./AdminNavBar";

 export const AdminLayout = () => {
-  const { t } = useTranslation();
  const { config } = useServerConfig();
  const { data: serverDetails, isLoading } = useFetchServerStatus();
  const { subscription } = useSubscription();
@@ -26,7 +22,7 @@ export const AdminLayout = () => {
    <>
      <Banner />
      <div
-        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+        className={`dark ${containerHeight} flex w-full flex-col overflow-x-hidden bg-bunker-800 transition-all`}
      >
        <Navbar />
        {!isLoading && !serverDetails?.redisConfigured && <RedisBanner />}
@@ -40,12 +36,6 @@ export const AdminLayout = () => {
          </div>
        </div>
      </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
      <Banner />
    </>
  );
--- a/frontend/src/layouts/KmsLayout/KmsLayout.tsx
+++ b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
@@ -13,7 +13,7 @@ export const KmsLayout = () => {
  const location = useLocation();

  return (
-    <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
        <motion.div
          key="menu-project-items"
--- a/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
+++ b/frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Outlet, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

@@ -27,8 +24,6 @@ export const OrganizationLayout = () => {

  const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);

-  const { t } = useTranslation();
-
  const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";

  const { data: serverDetails, isLoading } = useFetchServerStatus();
@@ -38,7 +33,7 @@ export const OrganizationLayout = () => {
    <>
      <Banner />
      <div
-        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+        className={`dark ${containerHeight} flex w-full flex-col overflow-x-hidden bg-bunker-800 transition-all`}
      >
        <Navbar />
        <div className="flex grow flex-col overflow-y-hidden">
@@ -61,12 +56,6 @@ export const OrganizationLayout = () => {
        isOpen={popUp?.createOrg?.isOpen}
        onClose={() => handlePopUpToggle("createOrg", false)}
      />
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
      <Banner />
    </>
  );
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -294,7 +294,7 @@ export const Navbar = () => {
          </>
        ) : (
          <>
-            <div className="flex items-center overflow-hidden">
+            <div className="flex min-w-12 items-center overflow-hidden">
              <DropdownMenu modal={false} open={isOrgSelectOpen} onOpenChange={setIsOrgSelectOpen}>
                <div className="group flex cursor-pointer items-center gap-2 overflow-hidden text-sm text-white transition-all duration-100 hover:text-primary">
                  <Badge
@@ -324,7 +324,7 @@ export const Navbar = () => {
                      <span>{currentOrg?.name}</span>
                    </button>
                  </Badge>
-                  <div className="mr-1 rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline!">
+                  <div className="mr-1 hidden rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline! md:inline-block">
                    {getPlan(subscription)}
                  </div>
                  {subscription.cardDeclined && (
@@ -468,7 +468,7 @@ export const Navbar = () => {
                    className={twMerge(
                      "gap-x-1.5 text-sm",
                      !isOrgScope &&
-                        "bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-sub-org"
+                        "min-w-6 bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-sub-org"
                    )}
                  >
                    <Link to="/organization/projects">
@@ -569,11 +569,11 @@ export const Navbar = () => {
      )}
      {user.superAdmin && !location.pathname.startsWith("/admin") && (
        <Link
-          className="mr-2 flex items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
+          className="mr-2 flex h-[34px] items-center rounded-md border border-mineshaft-500 px-2.5 py-1.5 text-sm whitespace-nowrap text-mineshaft-200 hover:bg-mineshaft-600"
          to="/admin"
        >
-          <InstanceIcon className="mr-2 inline-block size-3.5" />
-          Server Console
+          <InstanceIcon className="inline-block size-3.5" />
+          <span className="ml-2 hidden md:inline-block">Server Console</span>
        </Link>
      )}
      <DropdownMenu modal={false}>
--- a/frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx
@@ -21,7 +21,7 @@ export const OrgNavBar = ({ isHidden }: Props) => {
  return (
    <>
      {!isHidden && (
-        <div className="dark hidden w-full flex-col overflow-x-hidden border-b border-mineshaft-600 bg-mineshaft-900 px-4 md:flex">
+        <div className="dark flex w-full flex-col overflow-x-hidden border-b border-mineshaft-600 bg-mineshaft-900 px-4">
          <motion.div
            key="menu-org-items"
            initial={{ x: -150 }}
--- a/frontend/src/layouts/PamLayout/PamLayout.tsx
+++ b/frontend/src/layouts/PamLayout/PamLayout.tsx
@@ -28,7 +28,7 @@ export const PamLayout = () => {

  return (
    <>
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
+      <div className="dark flex h-full w-full flex-col overflow-x-hidden">
        <div className="border-b border-mineshaft-600 bg-mineshaft-900">
          <motion.div
            key="menu-project-items"
--- a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
+++ b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx
@@ -1,29 +1,16 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Outlet } from "@tanstack/react-router";

 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";

 export const PersonalSettingsLayout = () => {
-  const { t } = useTranslation();
-
  return (
-    <>
-      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden bg-bunker-800 md:flex">
-        {!window.isSecureContext && <InsecureConnectionBanner />}
-        <div className="flex grow flex-col overflow-y-hidden md:flex-row">
-          <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4 dark:scheme-dark">
-            <Outlet />
-          </main>
-        </div>
+    <div className="dark flex h-screen w-full flex-col overflow-x-hidden bg-bunker-800">
+      {!window.isSecureContext && <InsecureConnectionBanner />}
+      <div className="flex grow flex-col overflow-y-hidden md:flex-row">
+        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4 dark:scheme-dark">
+          <Outlet />
+        </main>
      </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
-    </>
+    </div>
  );
 };
--- a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+++ b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";

@@ -17,7 +14,6 @@ export const PkiManagerLayout = () => {
  const { currentProject } = useProject();
  const { assumedPrivilegeDetails } = useProjectPermission();
  const { subscription } = useSubscription();
-  const { t } = useTranslation();

  const { data: subscribers = [] } = useListWorkspacePkiSubscribers(currentProject?.id || "");
  const { data: templatesData } = useListWorkspaceCertificateTemplates({
@@ -32,147 +28,137 @@ export const PkiManagerLayout = () => {

  const location = useLocation();
  return (
-    <>
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
-        <div className="border-b border-mineshaft-600 bg-mineshaft-900">
-          <motion.div
-            key="menu-project-items"
-            initial={{ x: -150 }}
-            animate={{ x: 0 }}
-            exit={{ x: -150 }}
-            transition={{ duration: 0.2 }}
-            className="px-4"
-          >
-            <nav className="w-full">
-              <Tabs value="selected">
-                <TabList className="border-b-0">
-                  <Link
-                    to="/projects/cert-management/$projectId/policies"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Certificates</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/certificate-authorities"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab value={isActive || location.pathname.match(/\/ca\//) ? "selected" : ""}>
-                        Certificate Authorities
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/alerting"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Alerting</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/integrations"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/app-connections"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab value={isActive ? "selected" : ""}>App Connections</Tab>
-                    )}
-                  </Link>
-                  {showLegacySection && (
-                    <>
-                      {(subscription.pkiLegacyTemplates || hasExistingSubscribers) && (
-                        <Link
-                          to="/projects/cert-management/$projectId/subscribers"
-                          params={{
-                            projectId: currentProject.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <Tab value={isActive ? "selected" : ""}>Subscribers (Legacy)</Tab>
-                          )}
-                        </Link>
-                      )}
-                      {(subscription.pkiLegacyTemplates || hasExistingTemplates) && (
-                        <Link
-                          to="/projects/cert-management/$projectId/certificate-templates"
-                          params={{
-                            projectId: currentProject.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <Tab value={isActive ? "selected" : ""}>
-                              Certificate Templates (Legacy)
-                            </Tab>
-                          )}
-                        </Link>
-                      )}
-                    </>
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
+      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+        <motion.div
+          key="menu-project-items"
+          initial={{ x: -150 }}
+          animate={{ x: 0 }}
+          exit={{ x: -150 }}
+          transition={{ duration: 0.2 }}
+          className="px-4"
+        >
+          <nav className="w-full">
+            <Tabs value="selected">
+              <TabList className="border-b-0">
+                <Link
+                  to="/projects/cert-management/$projectId/policies"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Certificates</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/certificate-authorities"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab value={isActive || location.pathname.match(/\/ca\//) ? "selected" : ""}>
+                      Certificate Authorities
+                    </Tab>
                  )}
-                  <Link
-                    to="/projects/cert-management/$projectId/access-management"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab
-                        value={
-                          isActive ||
-                          location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
-                            ? "selected"
-                            : ""
-                        }
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/alerting"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Alerting</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/integrations"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/app-connections"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>App Connections</Tab>}
+                </Link>
+                {showLegacySection && (
+                  <>
+                    {(subscription.pkiLegacyTemplates || hasExistingSubscribers) && (
+                      <Link
+                        to="/projects/cert-management/$projectId/subscribers"
+                        params={{
+                          projectId: currentProject.id
+                        }}
                      >
-                        Access Control
-                      </Tab>
+                        {({ isActive }) => (
+                          <Tab value={isActive ? "selected" : ""}>Subscribers (Legacy)</Tab>
+                        )}
+                      </Link>
                    )}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/audit-logs"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/cert-management/$projectId/settings"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
-                  </Link>
-                </TabList>
-              </Tabs>
-            </nav>
-          </motion.div>
-        </div>
-        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
-          <Outlet />
-        </div>
+                    {(subscription.pkiLegacyTemplates || hasExistingTemplates) && (
+                      <Link
+                        to="/projects/cert-management/$projectId/certificate-templates"
+                        params={{
+                          projectId: currentProject.id
+                        }}
+                      >
+                        {({ isActive }) => (
+                          <Tab value={isActive ? "selected" : ""}>
+                            Certificate Templates (Legacy)
+                          </Tab>
+                        )}
+                      </Link>
+                    )}
+                  </>
+                )}
+                <Link
+                  to="/projects/cert-management/$projectId/access-management"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab
+                      value={
+                        isActive ||
+                        location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
+                          ? "selected"
+                          : ""
+                      }
+                    >
+                      Access Control
+                    </Tab>
+                  )}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/audit-logs"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
+                </Link>
+                <Link
+                  to="/projects/cert-management/$projectId/settings"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
+                </Link>
+              </TabList>
+            </Tabs>
+          </nav>
+        </motion.div>
      </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
+      {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
+      <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
+        <Outlet />
      </div>
-    </>
+    </div>
  );
 };
--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -106,7 +106,9 @@ export const ProjectSelect = () => {
          </p>
          <Badge variant="project">
            <ProjectIcon />
-            {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
+            <span className="hidden sm:inline-block">
+              {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
+            </span>
          </Badge>
        </Link>
        <DropdownMenuTrigger asChild>
--- a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+++ b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
@@ -1,6 +1,3 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";

@@ -20,7 +17,6 @@ export const SecretManagerLayout = () => {
  const { assumedPrivilegeDetails } = useProjectPermission();
  const location = useLocation();

-  const { t } = useTranslation();
  const projectSlug = currentProject?.slug || "";

  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
@@ -42,141 +38,131 @@ export const SecretManagerLayout = () => {
    (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);

  return (
-    <>
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
-        <div className="border-b border-mineshaft-600 bg-mineshaft-900">
-          <motion.div
-            key="menu-project-items"
-            initial={{ x: -150 }}
-            animate={{ x: 0 }}
-            exit={{ x: -150 }}
-            transition={{ duration: 0.2 }}
-            className="px-4"
-          >
-            <nav className="w-full">
-              <Tabs value="selected">
-                <TabList className="border-b-0">
-                  <Link
-                    to="/projects/secret-management/$projectId/overview"
-                    params={{
-                      projectId: currentProject.id,
-                      ...(currentProject.environments.length
-                        ? { envSlug: currentProject.environments[0]?.slug }
-                        : {})
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab
-                        value={
-                          isActive || location.pathname.match(/\/secrets\/|\/commits\//)
-                            ? "selected"
-                            : ""
-                        }
-                      >
-                        Overview
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/approval"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab value={isActive ? "selected" : ""}>
-                        Approvals
-                        {Boolean(
-                          secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
-                        ) && (
-                          <Badge variant="warning" isSquare className="ml-1.5">
-                            {pendingRequestsCount}
-                          </Badge>
-                        )}
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/integrations"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
-                  </Link>
-                  {Boolean(secretRotations?.length) && (
-                    <Link
-                      to="/projects/secret-management/$projectId/secret-rotation"
-                      params={{
-                        projectId: currentProject.id
-                      }}
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
+      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+        <motion.div
+          key="menu-project-items"
+          initial={{ x: -150 }}
+          animate={{ x: 0 }}
+          exit={{ x: -150 }}
+          transition={{ duration: 0.2 }}
+          className="px-4"
+        >
+          <nav className="w-full">
+            <Tabs value="selected">
+              <TabList className="border-b-0">
+                <Link
+                  to="/projects/secret-management/$projectId/overview"
+                  params={{
+                    projectId: currentProject.id,
+                    ...(currentProject.environments.length
+                      ? { envSlug: currentProject.environments[0]?.slug }
+                      : {})
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab
+                      value={
+                        isActive || location.pathname.match(/\/secrets\/|\/commits\//)
+                          ? "selected"
+                          : ""
+                      }
                    >
-                      {({ isActive }) => (
-                        <Tab value={isActive ? "selected" : ""}>Secret Rotations</Tab>
-                      )}
-                    </Link>
+                      Overview
+                    </Tab>
                  )}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/approval"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab value={isActive ? "selected" : ""}>
+                      Approvals
+                      {Boolean(
+                        secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
+                      ) && (
+                        <Badge variant="warning" isSquare className="ml-1.5">
+                          {pendingRequestsCount}
+                        </Badge>
+                      )}
+                    </Tab>
+                  )}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/integrations"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Integrations</Tab>}
+                </Link>
+                {Boolean(secretRotations?.length) && (
                  <Link
-                    to="/projects/secret-management/$projectId/app-connections"
+                    to="/projects/secret-management/$projectId/secret-rotation"
                    params={{
                      projectId: currentProject.id
                    }}
                  >
                    {({ isActive }) => (
-                      <Tab value={isActive ? "selected" : ""}>App Connections</Tab>
+                      <Tab value={isActive ? "selected" : ""}>Secret Rotations</Tab>
                    )}
                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/access-management"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <Tab
-                        value={
-                          isActive ||
-                          location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
-                            ? "selected"
-                            : ""
-                        }
-                      >
-                        Access Control
-                      </Tab>
-                    )}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/audit-logs"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
-                  </Link>
-                  <Link
-                    to="/projects/secret-management/$projectId/settings"
-                    params={{
-                      projectId: currentProject.id
-                    }}
-                  >
-                    {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
-                  </Link>
-                </TabList>
-              </Tabs>
-            </nav>
-          </motion.div>
-        </div>
-        {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
-        <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
-          <Outlet />
-        </div>
+                )}
+                <Link
+                  to="/projects/secret-management/$projectId/app-connections"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>App Connections</Tab>}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/access-management"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => (
+                    <Tab
+                      value={
+                        isActive ||
+                        location.pathname.match(/\/groups\/|\/identities\/|\/members\/|\/roles\//)
+                          ? "selected"
+                          : ""
+                      }
+                    >
+                      Access Control
+                    </Tab>
+                  )}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/audit-logs"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Audit Logs</Tab>}
+                </Link>
+                <Link
+                  to="/projects/secret-management/$projectId/settings"
+                  params={{
+                    projectId: currentProject.id
+                  }}
+                >
+                  {({ isActive }) => <Tab value={isActive ? "selected" : ""}>Settings</Tab>}
+                </Link>
+              </TabList>
+            </Tabs>
+          </nav>
+        </motion.div>
      </div>
-      <div className="z-200 flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
+      {assumedPrivilegeDetails && <AssumePrivilegeModeBanner />}
+      <div className="flex-1 overflow-x-hidden overflow-y-auto bg-bunker-800 px-12 pt-10 pb-4">
+        <Outlet />
      </div>
-    </>
+    </div>
  );
 };
--- a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
+++ b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
@@ -36,7 +36,7 @@ export const SecretScanningLayout = () => {
  );

  return (
-    <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
        <motion.div
          key="menu-project-items"
--- a/frontend/src/layouts/SshLayout/SshLayout.tsx
+++ b/frontend/src/layouts/SshLayout/SshLayout.tsx
@@ -18,7 +18,7 @@ export const SshLayout = () => {
  const location = useLocation();

  return (
-    <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
        <motion.div
          key="menu-project-items"
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx
@@ -209,7 +209,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {

  return (
    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div>
          <div className="flex items-center gap-x-2">
            <p className="text-xl font-medium text-mineshaft-100">App Connections</p>
--- a/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx
@@ -125,7 +125,7 @@ export const AllProjectView = ({

  return (
    <div>
-      <div className="flex w-full flex-row">
+      <div className="flex w-full flex-row flex-wrap gap-2 md:flex-nowrap md:gap-0">
        <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
        <Input
          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
--- a/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx
@@ -360,7 +360,7 @@ export const MyProjectView = ({

  return (
    <div>
-      <div className="flex w-full flex-row">
+      <div className="flex w-full flex-row flex-wrap gap-2 md:flex-nowrap md:gap-0">
        <ProjectListToggle value={projectListView} onChange={onProjectListViewChange} />
        <Input
          className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50/60 duration-200 focus:bg-mineshaft-700/80"
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
@@ -90,7 +90,7 @@ export const SecretSyncsTab = () => {
  return (
    <>
      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
          <div>
            <div className="flex items-center gap-1.5">
              <p className="text-lg font-medium text-mineshaft-100">Secret Syncs</p>
--- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
@@ -959,9 +959,9 @@ export const OverviewPage = () => {
            }
          />
        </div>
-        <div className="flex items-center justify-between">
+        <div className="flex flex-wrap items-center justify-between gap-2">
          <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-          <div className="flex flex-row items-center justify-center space-x-2">
+          <div className="flex flex-row flex-wrap items-center gap-2">
            {isTableFiltered && (
              <Button
                variant="plain"
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
@@ -294,7 +294,7 @@ export const AccessApprovalRequest = ({
  return (
    <>
      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
          <div>
            <div className="flex items-center gap-x-2">
              <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
@@ -240,7 +240,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
  return (
    <>
      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
          <div>
            <div className="flex items-center gap-x-2">
              <p className="text-xl font-medium text-mineshaft-100">Policies</p>
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
@@ -690,7 +690,7 @@ export const ActionBar = ({

  return (
    <>
-      <div className="mt-4 flex items-center space-x-2">
+      <div className="mt-4 flex flex-wrap items-center gap-2">
        <SecretSearchInput
          isSingleEnv
          className="w-2/5"
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSharingSection/SecretSharingSection.tsx
@@ -40,12 +40,13 @@ export const SecretSharingSection = () => {
      <p className="mb-3 text-xl font-medium">Allow Secret Sharing</p>
      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
        {(isAllowed) => (
-          <div className="w-max">
+          <div>
            <Checkbox
              id="secretSharing"
              isDisabled={!isAllowed || isLoading}
              isChecked={currentProject?.secretSharing ?? true}
              onCheckedChange={(state) => handleToggle(state as boolean)}
+              allowMultilineLabel
            >
              This feature enables your project members to securely share secrets.
            </Checkbox>
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
@@ -40,12 +40,13 @@ export const SecretSnapshotsLegacySection = () => {
      <p className="mb-3 text-xl font-medium">Show Secret Snapshots ( legacy )</p>
      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
        {(isAllowed) => (
-          <div className="w-max">
+          <div>
            <Checkbox
              id="showSnapshotsLegacy"
              isDisabled={!isAllowed || isLoading}
              isChecked={currentProject?.showSnapshotsLegacy ?? false}
              onCheckedChange={(state) => handleToggle(state as boolean)}
+              allowMultilineLabel
            >
              This feature enables your project members to view secret snapshots in the legacy
              format.