fix: resolve text overflow issues for workspace empty state (coder#14015)

Parkreiner · web-flow · commit 9f3c1c736713 · 2024-07-25T18:19:57.000Z
diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -92,8 +92,8 @@ export const WorkspacesEmpty = (props: {
           >
             {featuredTemplates?.map((t) => (
               <Link
-                to={`/templates/${t.name}/workspace`}
                 key={t.id}
+                to={`/templates/${t.name}/workspace`}
                 css={(theme) => ({
                   width: "320px",
                   padding: 16,
@@ -120,19 +120,38 @@ export const WorkspacesEmpty = (props: {
                     {t.name}
                   </Avatar>
                 </div>
-                <div>
-                  <h4 css={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
-                    {t.display_name.length > 0 ? t.display_name : t.name}
+
+                <div css={{ width: "100%", minWidth: "0" }}>
+                  <h4
+                    css={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      margin: 0,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {t.display_name || t.name}
                   </h4>
-                  <span
+
+                  <p
                     css={(theme) => ({
                       fontSize: 13,
                       color: theme.palette.text.secondary,
-                      lineHeight: "0.5",
+                      lineHeight: "1.4",
+                      margin: 0,
+                      paddingTop: "4px",
+
+                      // We've had users plug URLs directly into the
+                      // descriptions, when those URLS have no hyphens or other
+                      // easy semantic breakpoints. Need to set this to ensure
+                      // those URLs don't break outside their containing boxes
+                      wordBreak: "break-word",
                     })}
                   >
                     {t.description}
-                  </span>
+                  </p>
                 </div>
               </Link>
             ))}
