added title sizes for long titles

src/components/flow/Cell/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { INode } from '~/redux/types';
-import { getURL, formatCellText } from '~/utils/dom';
+import { formatCellText, getURL } from '~/utils/dom';
 import classNames from 'classnames';
 
 import * as styles from './styles.scss';
@@ -109,6 +109,16 @@ const Cell: FC<IProps> = ({
     return getURL({ url: thumbnail }, preset);
   }, [thumbnail, flow]);
 
+  const titleSize = useMemo(() => {
+    if (title.length > 100) {
+      return styles.small;
+    } else if (title.length > 64) {
+      return styles.medium;
+    } else {
+      return;
+    }
+  }, [title]);
+
   return (
     <div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}>
       {is_visible && (
@@ -134,7 +144,7 @@ const Cell: FC<IProps> = ({
 
           <Link className={classNames(styles.face)} to={`/post${id}`}>
             <div className={styles.face_content}>
-              {!text && <div className={styles.title}>{title || '...'}</div>}
+              {!text && <div className={classNames(styles.title, titleSize)}>{title || '...'}</div>}
 
               {!!text && !!thumbnail && (
                 <div className={styles.text}>

src/components/flow/Cell/styles.scss

@@ -95,10 +95,21 @@
   opacity: 1;
   transform: translate(0, 0);
   transition: opacity 0.5s, transform 1s;
+
+  &.small {
+    @include clamp(8, 1.25em);
+    font-size: 24px;
+  }
+
+  &.medium{
+    @include clamp(6, 1.25em);
+    font-size: 28px;
+  }
 }
 
 .text_title {
   margin-bottom: $gap / 2;
+  @include clamp(3, 1.25em)
 }
 
 .horizontal,

src/styles/variables.scss

@@ -175,3 +175,13 @@ $login_dialog_padding: $gap $gap 30px $gap;
     background: transparentize(white, 0.95);
   }
 }
+
+@mixin clamp($lines, $line: 1em) {
+  max-height: $line * $lines;
+  overflow: hidden;
+  -webkit-line-clamp: $lines;
+  line-clamp: $lines;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}