fix: channel elidation

src/client/channel.jsx

@@ -1,6 +1,5 @@
 import './channel.scss';
 
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Link} from 'react-router-dom';
@@ -27,38 +26,15 @@ export default function Channel(props) {
         )
       }
       <span className="muted">{prefix}</span>
-      <span
-        className={classnames(
-          'channel__name',
-          {long: name && name.length >= 12},
-          {superlong: name && name.length >= 16},
-        )}
-      >
-        {name}
-      </span>
+      <span className="channel__name">{name}</span>
     </>
   );
   return (
-    <div
-      className={classnames('channel')}
-    >
-      {(
-        href
-          ? (
-            <Link
-              className="channel__link"
-              to={href}
-            >
-              {content}
-            </Link>
-          )
-          : (
-            <div
-              className="channel__link"
-            >
-              {content}
-            </div>
-          )
+    <div className="channel">
+      {React.cloneElement(
+        href ? <Link to={href} /> : <div />,
+        {className: 'channel__link', title: name},
+        [content],
       )}
       <div
         className="channel__actions"

src/client/channel.scss

@@ -5,13 +5,17 @@
 }
 
 .channel__link {
-  align-items: center;
   color: #ffffff;
-  display: flex;
+  display: block;
   font-family: var(--title-font-family);
   height: 3em;
-  padding: 0 1em;
+  max-width: calc(100% - 5em);
+  overflow: hidden;
+  padding: 1em;
+  padding-right: 0;
   text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   .muted {
     font-size: 0.8em;
     padding-top: 0.15em;
@@ -30,17 +34,6 @@
   }
 }
 
-.channel__name {
-  &.long {
-    font-size: 0.8em;
-    padding-top: 0.2em;
-  }
-  &.superlong {
-    font-size: 0.6em;
-    padding-top: 0.4em;
-  }
-}
-
 .channel__actions {
   align-items: center;
   display: flex;