feat: updated position of the organization name (#1154)

* feat: updated position of the organization name * Fix: Prevent content of the org card from being cropped when the organization name is long
PalisadoesFoundation · Dec 8, 2023 · 64f3ab3 · 64f3ab3
1 parent 76d7fed
commit 64f3ab3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
@@ -36,6 +36,7 @@
 .orgCard .innerContainer .content {
   flex: 1;
   margin-left: 1rem;
+  width: 70%;
 }
 
 .orgCard button {
@@ -90,3 +91,9 @@
   justify-content: space-around;
   width: 150px;
 }
+
+.orgName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
@@ -8,6 +8,7 @@ import type { InterfaceOrgConnectionInfoType } from 'utils/interfaces';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import { useQuery } from '@apollo/client';
+import { Tooltip } from '@mui/material';
 
 export interface InterfaceOrgListCardProps {
   data: InterfaceOrgConnectionInfoType;
@@ -55,6 +56,9 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
             )}
           </div>
           <div className={styles.content}>
+            <Tooltip title={name} placement="top-end">
+              <h4 className={styles.orgName}>{name}</h4>
+            </Tooltip>
             <h6 className="text-secondary">
               <LocationOnIcon fontSize="inherit" className="fs-5" />
               {location}
@@ -65,7 +69,6 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
             <h6>
               {t('members')}: <span>{members.length}</span>
             </h6>
-            <h6>{name} </h6>
           </div>
         </div>
         <Button