Merge pull request #4893 from Infisical/fix/product-settings-responsiveness

fix: product settings styling improvements
This commit is contained in:
Piyush Gupta
2025-11-18 23:32:50 +05:30
committed by GitHub
11 changed files with 21 additions and 19 deletions

View File

@@ -49,7 +49,7 @@ export const OrgGroupsSection = () => {
return (
<div className="mb-6 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 className="flex items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">Groups</p>
<DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups" />

View File

@@ -97,7 +97,7 @@ export const IdentitySection = withPermission(
return (
<div>
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex w-full items-center gap-4">
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
<div className="flex flex-1 items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">Identities</p>
<DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
@@ -139,7 +139,7 @@ export const IdentitySection = withPermission(
</div>
{/* Identity Auth Templates Section */}
<div className="mt-4 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 className="flex items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">Identity Auth Templates</p>
<DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/auth-templates" />

View File

@@ -203,7 +203,7 @@ export const OrgMembersSection = () => {
</div>
</div>
<div className="mb-6 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 className="flex items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">Users</p>
<DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/user-identities" />

View File

@@ -392,7 +392,7 @@ export const OrgMembersTable = ({
}}
/>
</Th>
<Th className="w-1/3">
<Th className="min-w-40 md:w-1/3 md:min-w-0">
<div className="flex items-center">
Name
<IconButton
@@ -505,7 +505,7 @@ export const OrgMembersTable = ({
<Td
className={twMerge("group max-w-0", isActive ? "" : "text-mineshaft-400")}
>
<div className="flex items-center gap-x-2">
<div className="flex w-full items-center gap-x-2">
<p className="truncate">
{name ?? <span className="text-mineshaft-400">Not Set</span>}
</p>

View File

@@ -189,7 +189,7 @@ export const OrgRoleTable = () => {
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 className="flex items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">
{isSubOrganization ? "Sub-" : ""}Organization Roles

View File

@@ -150,8 +150,8 @@ const Page = () => {
</DropdownMenuContent>
</DropdownMenu>
</PageHeader>
<div className="flex">
<div className="mr-4 w-96">
<div className="flex flex-col gap-4 md:flex-row">
<div className="w-full md:w-96">
<GroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />
</div>
<GroupMembersSection groupId={groupId} groupSlug={data.group.slug} />

View File

@@ -116,8 +116,8 @@ const Page = () => {
)}
</div>
</PageHeader>
<div className="flex">
<div className="mr-4 w-96">
<div className="flex flex-col gap-4 md:flex-row">
<div className="w-full md:w-96">
<IdentityDetailsSection
isOrgIdentity={data.identity.orgId === currentOrg.id}
identityId={identityId}

View File

@@ -37,7 +37,7 @@ export const ExternalMigrationsTab = () => {
</p>
</div>
<div className="flex items-start justify-between">
<div className="flex flex-wrap items-start justify-between gap-2">
<div>
<div className="flex items-center gap-2">
<p className="text-base font-medium text-mineshaft-100">

View File

@@ -71,7 +71,7 @@ export const VaultConnectionSection = () => {
return (
<div>
<div className="mb-4 flex items-center justify-between">
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-3">
<img
src="/images/integrations/Vault.png"

View File

@@ -34,9 +34,11 @@ export const ProjectTemplatesSection = () => {
project setup
</p>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
<DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/project-templates" />
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-x-2">
<p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
<DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/project-templates" />
</div>
<OrgPermissionCan
I={OrgPermissionActions.Create}
a={OrgPermissionSubjects.ProjectTemplates}
@@ -57,7 +59,7 @@ export const ProjectTemplatesSection = () => {
handlePopUpOpen("addTemplate");
}}
isDisabled={!isAllowed}
className="ml-auto"
// className="ml-auto"
>
Add Template
</Button>

View File

@@ -242,8 +242,8 @@ const Page = withPermission(
)}
</div>
</PageHeader>
<div className="flex">
<div className="mr-4 w-96">
<div className="flex flex-col gap-4 md:flex-row">
<div className="w-full md:w-96">
<UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
</div>
<div className="w-full space-y-2">