Merge branch 'fix/infisical-app-mobile-view' of https://github.com/Infisical/infisical into fix/infisical-app-mobile-view

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"

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" />
+          <InstanceIcon className="inline-block size-3.5" />
-          Server Console
+          <span className="ml-2 hidden md:inline-block">Server Console</span>
         </Link>
       )}
       <DropdownMenu modal={false}>

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 }}

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"

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>

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"

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"

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>

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.