Merge pull request #979 from sophiabits/fix-925

Truncate text & show tooltip when website name is too long (Resolves #925)

components/common/OverflowText.js

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactTooltip from 'react-tooltip';
+
+import styles from './OverflowText.module.css';
+
+const OverflowText = ({ children, tooltipId }) => {
+  const measureEl = useRef();
+  const [isOverflown, setIsOverflown] = useState(false);
+
+  const measure = useCallback(
+    el => {
+      if (!el) return;
+      setIsOverflown(el.scrollWidth > el.clientWidth);
+    },
+    [setIsOverflown],
+  );
+
+  // Do one measure on mount
+  useEffect(() => {
+    measure(measureEl.current);
+  }, [measure]);
+
+  // Set up resize listener for subsequent measures
+  useEffect(() => {
+    if (!measureEl.current) return;
+
+    // Destructure ref in case it changes out from under us
+    const el = measureEl.current;
+
+    if ('ResizeObserver' in global) {
+      // Ideally, we have access to ResizeObservers
+      const observer = new ResizeObserver(() => {
+        measure(el);
+      });
+      observer.observe(el);
+      return () => observer.unobserve(el);
+    } else {
+      // Otherwise, fall back to measuring on window resizes
+      const handler = () => measure(el);
+
+      window.addEventListener('resize', handler, { passive: true });
+      return () => window.removeEventListener('resize', handler, { passive: true });
+    }
+  });
+
+  return (
+    <span
+      ref={measureEl}
+      data-tip={children.toString()}
+      data-effect="solid"
+      data-for={tooltipId}
+      className={styles.root}
+    >
+      {children}
+      {isOverflown && <ReactTooltip id={tooltipId}>{children}</ReactTooltip>}
+    </span>
+  );
+};
+
+OverflowText.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  tooltipId: PropTypes.string.isRequired,
+};
+
+export default OverflowText;

components/common/OverflowText.module.css

@@ -0,0 +1,6 @@
+.root {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

components/metrics/WebsiteHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
+import OverflowText from 'components/common/OverflowText';
 import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
@@ -13,15 +14,19 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
   const header = showLink ? (
     <>
       <Favicon domain={domain} />
-      <Link href="/website/[...id]" as={`/website/${websiteId}/${title}`}>
-        {title}
+      <Link
+        className={styles.titleLink}
+        href="/website/[...id]"
+        as={`/website/${websiteId}/${title}`}
+      >
+        <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
       </Link>
     </>
   ) : (
-    <div>
+    <>
       <Favicon domain={domain} />
-      {title}
-    </div>
+      <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
+    </>
   );
 
   return (

components/metrics/WebsiteHeader.module.css

@@ -2,6 +2,14 @@
   color: var(--gray900);
   font-size: var(--font-size-large);
   line-height: var(--font-size-large);
+  align-items: center;
+  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.titleLink {
+  max-width: 100%;
 }
 
 .link {

components/settings/WebsiteSettings.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Table from 'components/common/Table';
 import Button from 'components/common/Button';
+import OverflowText from 'components/common/OverflowText';
 import PageHeader from 'components/layout/PageHeader';
 import Modal from 'components/common/Modal';
 import WebsiteEditForm from 'components/forms/WebsiteEditForm';
@@ -84,12 +85,20 @@ export default function WebsiteSettings() {
   );
 
   const DetailsLink = ({ website_id, name, domain }) => (
-    <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+    <Link
+      className={styles.detailLink}
+      href="/website/[...id]"
+      as={`/website/${website_id}/${name}`}
+    >
       <Favicon domain={domain} />
-      {name}
+      <OverflowText tooltipId={`${website_id}-name`}>{name}</OverflowText>
     </Link>
   );
 
+  const Domain = ({ domain, website_id }) => (
+    <OverflowText tooltipId={`${website_id}-domain`}>{domain}</OverflowText>
+  );
+
   const adminColumns = [
     {
       key: 'name',
@@ -101,6 +110,7 @@ export default function WebsiteSettings() {
       key: 'domain',
       label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
       className: 'col-4 col-xl-3',
+      render: Domain,
     },
     {
       key: 'account',
@@ -125,6 +135,7 @@ export default function WebsiteSettings() {
       key: 'domain',
       label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
       className: 'col-6 col-xl-4',
+      render: Domain,
     },
     {
       key: 'action',

components/settings/WebsiteSettings.module.css

@@ -5,3 +5,7 @@
 .buttons {
   justify-content: flex-end;
 }
+
+.detailLink {
+  width: 100%;
+}