mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-16 03:21:30 -05:00
Code Issues Packages Projects Releases 160 Wiki Activity

#263 long strings edge cases fixed (#267)

Browse Source 
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Shubhdeep Chhabra
2023-05-01 18:54:48 +05:30
committed by GitHub
parent 13508f42be
commit ae0bf3e90d
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/web/app/environments/[environmentId]/EnvironmentsNavbar.tsx
View File

@@ -20,7 +20,7 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner";
import { useEnvironment } from "@/lib/environments/environments";
import { useMemberships } from "@/lib/memberships";
import { useTeam } from "@/lib/teams/teams";
import { capitalizeFirstLetter } from "@/lib/utils";
import { capitalizeFirstLetter, truncate } from "@/lib/utils";
import {
CustomersIcon,
ErrorComponent,
@@ -28,6 +28,10 @@ import {
FormIcon,
ProfileAvatar,
SettingsIcon,
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@formbricks/ui";
import {
AdjustmentsVerticalIcon,
@@ -262,7 +266,7 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
<div>
<p className="ph-no-capture ph-no-capture -mb-0.5 text-sm font-bold text-slate-700">
{environment?.product?.name}
{truncate(environment?.product?.name, 30)}
</p>
<p className="text-sm text-slate-500">{capitalizeFirstLetter(environment?.type)}</p>
</div>
@@ -270,8 +274,22 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
</div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>
<span className="ph-no-capture font-normal">Signed in as</span> {session.user.name}
<DropdownMenuLabel className="cursor-default break-all">
<span className="ph-no-capture font-normal">Signed in as </span>
{session.user.name.length > 30 ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span>{truncate(session.user.name, 30)}</span>
</TooltipTrigger>
<TooltipContent className="max-w-[45rem] break-all" side="left" sideOffset={5}>
{session.user.name}
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
session.user.name
)}
</DropdownMenuLabel>
<DropdownMenuSeparator />
@@ -281,19 +299,19 @@ export default function EnvironmentsNavbar({ environmentId, session }: Environme
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div>
<p className="ph-no-capture">{environment?.product?.name}</p>
<p className="ph-no-capture break-all">{truncate(environment?.product?.name, 20)}</p>
<p className=" block text-xs text-slate-500">Product</p>
</div>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuSubContent className="max-w-[45rem]">
<DropdownMenuRadioGroup
value={environment?.product.id}
onValueChange={changeEnvironmentByProduct}>
{environment?.availableProducts?.map((product) => (
<DropdownMenuRadioItem
value={product.id}
className="cursor-pointer"
className="cursor-pointer break-all"
key={product.id}>
{product.name}
</DropdownMenuRadioItem>

6
apps/web/app/environments/[environmentId]/settings/members/EditMemberships.tsx
View File

@@ -80,15 +80,15 @@ export function EditMemberships({ environmentId }) {
<div className="grid-cols-7">
{[...team.members, ...team.invitees].map((member) => (
<div
className="grid h-12 w-full grid-cols-7 content-center rounded-lg p-0.5 py-2 text-left text-sm text-slate-900"
className="grid h-auto w-full grid-cols-7 content-center rounded-lg p-0.5 py-2 text-left text-sm text-slate-900"
key={member.email}>
<div className="h-58 px-6 ">
<ProfileAvatar userId={member.userId || member.email} />
</div>
<div className="ph-no-capture col-span-2 flex flex-col justify-center">
<div className="ph-no-capture col-span-2 flex flex-col justify-center break-all">
<p>{member.name}</p>
</div>
<div className="ph-no-capture col-span-2 flex flex-col justify-center">{member.email}</div>
<div className="ph-no-capture col-span-2 flex flex-col justify-center break-all">{member.email}</div>
<div className="col-span-2 flex items-center justify-end gap-x-6 pr-6">
{!member.accepted && <Badge type="warning" text="Pending" size="tiny" />}
{member.role !== "owner" && (