awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 10:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1483 from Salman2301/fix-org-long-name

Browse Source 
fix: truncate too long proj or org name
This commit is contained in:
Daniel Hougaard
2024-03-12 10:22:06 +01:00
committed by GitHub
parent 635948c4f4 3f0c4f0ca9
commit ad1cae6aac
7 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/AppLayout/AppLayout.tsx
+14 -7
View File
@@ -28,6 +28,7 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup";
import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { twMerge } from "tailwind-merge";
import * as yup from "yup";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -99,7 +100,7 @@ const supportOptions = [
];
const formSchema = yup.object({
name: yup.string().required().label("Project Name").trim(),
name: yup.string().required().label("Project Name").trim().max(64, "Too long, maximum length is 64 characters"),
addMembers: yup.bool().required().label("Add Members")
});
@@ -273,13 +274,16 @@ export const AppLayout = ({ children }: LayoutProps) => {
</Link>
)}
<DropdownMenu>
<DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600">
<DropdownMenuTrigger
asChild
className="max-w-[160px] data-[state=open]:bg-mineshaft-600"
>
<div className="mr-auto flex items-center rounded-md py-1.5 pl-1.5 pr-2 hover:bg-mineshaft-600">
<div className="flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm">
<div className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-md bg-primary text-sm">
{currentOrg?.name.charAt(0)}
</div>
<div
className="overflow-hidden text-ellipsis pl-2 text-sm text-mineshaft-100"
className="overflow-hidden truncate text-ellipsis pl-2 text-sm text-mineshaft-100"
style={{ maxWidth: "140px" }}
>
{currentOrg?.name}
@@ -323,7 +327,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
)
}
>
<div className="flex w-full items-center justify-between">
<div className="flex w-full max-w-[150px] items-center justify-between truncate">
{org.name}
</div>
</Button>
@@ -422,7 +426,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
<Select
defaultValue={currentWorkspace?.id}
value={currentWorkspace?.id}
className="w-full truncate bg-mineshaft-600 py-2.5 font-medium"
className="w-full [&>*:first-child]:truncate bg-mineshaft-600 py-2.5 font-medium"
onValueChange={(value) => {
router.push(`/project/${value}/secrets/overview`);
localStorage.setItem("projectData.id", value);
@@ -437,7 +441,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
<SelectItem
key={`ws-layout-list-${id}`}
value={id}
className={`${currentWorkspace?.id === id && "bg-mineshaft-600"}`}
className={twMerge(
currentWorkspace?.id === id && "bg-mineshaft-600",
"truncate"
)}
>
{name}
</SelectItem>