fix: text ellipsis fix (#217)

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2023-01-31 19:51:33 +05:30 committed by GitHub
parent 0cb4edab54
commit fbb045436c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 6 deletions

View File

@ -52,7 +52,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = (props) => {
{project.icon && ( {project.icon && (
<span className="text-base">{String.fromCodePoint(parseInt(project.icon))}</span> <span className="text-base">{String.fromCodePoint(parseInt(project.icon))}</span>
)} )}
<span className="w-3/4 max-w-[225px] md:max-w-[140px] xl:max-w-[225px] text-ellipsis overflow-hidden"> <span className=" max-w-[225px] w-[125px] xl:max-w-[225px] text-ellipsis overflow-hidden">
{project.name} {project.name}
</span> </span>
<span className="text-xs text-gray-500 ">{project.identifier}</span> <span className="text-xs text-gray-500 ">{project.identifier}</span>

View File

@ -99,7 +99,9 @@ export const ProjectSidebarList: FC = () => {
{!sidebarCollapse && ( {!sidebarCollapse && (
<span className="flex w-full items-center justify-between"> <span className="flex w-full items-center justify-between">
{project?.name} <span className="w-[125px] text-ellipsis overflow-hidden">
{project?.name}
</span>
<span> <span>
<ChevronDownIcon <ChevronDownIcon
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`} className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}

View File

@ -79,8 +79,10 @@ const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
)} )}
{!sidebarCollapse && ( {!sidebarCollapse && (
<span className="flex w-full items-center justify-between"> <span className="flex w-full items-center justify-between ">
{project?.name} <span className="w-[125px] text-ellipsis overflow-hidden">
{project?.name}
</span>
<span> <span>
<ChevronDownIcon <ChevronDownIcon
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`} className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}

View File

@ -199,7 +199,9 @@ const WorkspacePage: NextPage = () => {
{project?.name.charAt(0)} {project?.name.charAt(0)}
</span> </span>
)} )}
<h3>{project.name}</h3> <h3 className="w-[150px] lg:w-[225px] text-ellipsis overflow-hidden">
{project.name}
</h3>
</div> </div>
<div className="text-gray-400"> <div className="text-gray-400">
<ArrowRightIcon className="h-4 w-4" /> <ArrowRightIcon className="h-4 w-4" />

View File

@ -48,7 +48,7 @@ const Onboarding: NextPage = () => {
)} )}
</div> </div>
) : ( ) : (
<div className="h-3/5 w-full rounded-lg bg-white px-8 py-10 text-center md:w-1/2"> <div className="h-max min-h-[360px] w-full rounded-lg bg-white px-8 py-10 text-center md:w-1/2">
<div className="h-3/4 w-full"> <div className="h-3/4 w-full">
{step === 4 ? ( {step === 4 ? (
<Welcome /> <Welcome />