Improve display of long program titles

JoinColony · Feb 12, 2020 · 55a3a5a · 55a3a5a
1 parent 6ae33f3
commit 55a3a5a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css b/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css
@@ -8,24 +8,20 @@
   margin-bottom: 10px;
 }
 
-.navLink {
-  display: inline-block;
-  font-weight: var(--weight-medium);
+.baseStyles {
+  display: flex;
+  align-items: center;
 }
 
-.navLink + .navLink {
+.baseStyles + .baseStyles {
   margin-top: 10px;
 }
 
-.navLink:hover {
-  opacity: 0.8;
+.draft {
+  composes: baseStyles;
 }
 
-.navLinkDraft {
-  composes: navLink;
-}
-
-.navLinkDraft::after {
+.draft::after {
   display: inline-block;
   margin-bottom: 1px;
   margin-left: 10px;
@@ -35,3 +31,20 @@
   background-color: var(--golden);
   content: '';
 }
+
+.navLink {
+  margin-right: 10px;
+  overflow: hidden;
+  font-weight: var(--weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.draft .navLink {
+  /* Leave room for "pending dot" */
+  max-width: 87%;
+}
+
+.navLink:hover {
+  opacity: 0.8;
+}
diff --git a/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css.d.ts b/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.css.d.ts
@@ -1,4 +1,5 @@
 export const main: string;
 export const programsNav: string;
+export const baseStyles: string;
+export const draft: string;
 export const navLink: string;
-export const navLinkDraft: string;
diff --git a/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.tsx b/src/modules/dashboard/components/ColonyHome/ColonyMeta/ColonyPrograms.tsx
@@ -116,19 +116,22 @@ const ColonyPrograms = ({
       <nav className={styles.programsNav}>
         {programs.map(({ id, status, title }) => {
           const isDraft = status === ProgramStatus.Draft;
-          const className = isDraft ? styles.navLinkDraft : styles.navLink;
           return (
-            <NavLink
-              className={className}
+            <span
+              className={isDraft ? styles.draft : styles.baseStyles}
               key={id}
-              text={title || MSG.linkUntitledProgramText}
-              title={MSG.linkProgramTitleText}
-              titleValues={{
-                isDraft,
-                title: title || formatMessage(MSG.linkUntitledProgramText),
-              }}
-              to={`/colony/${colonyName}/program/${id}`}
-            />
+            >
+              <NavLink
+                className={styles.navLink}
+                text={title || MSG.linkUntitledProgramText}
+                title={MSG.linkProgramTitleText}
+                titleValues={{
+                  isDraft,
+                  title: title || formatMessage(MSG.linkUntitledProgramText),
+                }}
+                to={`/colony/${colonyName}/program/${id}`}
+              />
+            </span>
           );
         })}
       </nav>