fixed cell text on flow

src/components/flow/CellShade/styles.module.scss

@@ -14,8 +14,4 @@
     height: 10px;
     background-color: blue;
   }
-
-  @include tablet {
-    opacity: 0.7;
-  }
 }

src/components/flow/FlowCell/index.tsx

@@ -22,7 +22,7 @@ const FlowCell: FC<Props> = ({ color, to, image, display = 'single', text, title
   return (
     <NavLink className={classNames(styles.cell, styles[display || 'single'])} to={to}>
       {withText && (
-        <FlowCellText className={styles.text} title={title}>
+        <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
           {text!}
         </FlowCellText>
       )}
@@ -37,7 +37,12 @@ const FlowCell: FC<Props> = ({ color, to, image, display = 'single', text, title
       )}
 
       <CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
-      {!withText && <h4 className={styles.title}>{title}</h4>}
+
+      {!withText && (
+        <div className={styles.title_wrapper}>
+          <h4 className={styles.title}>{title}</h4>
+        </div>
+      )}
     </NavLink>
   );
 };

src/components/flow/FlowCell/styles.module.scss

@@ -32,6 +32,7 @@
 
 .shade {
   @include outer_shadow;
+
   position: absolute;
   top: 0;
   left: 0;
@@ -42,15 +43,26 @@
 
 .text {
   position: absolute;
-  bottom: 10px;
+  bottom: 5px;
-  left: 10px;
+  left: 5px;
   z-index: 1;
   overflow: hidden;
   border-radius: $radius;
-  max-height: calc(100% - 20px);
+  max-height: calc(100% - 10px);
-  max-width: calc(100% - 20px);
+  max-width: calc(100% - 10px);
   box-sizing: border-box;
+  font: $font_16_regular;
 
+  @include tablet {
+    font: $font_14_regular;
+    left: 5px;
+    bottom: 5px;
+  }
+
+  & :global(.grey) {
+    color: inherit;
+    opacity: 0.5;
+  }
 
   .quadro &,
   .horizontal & {
@@ -65,13 +77,21 @@
   }
 }
 
-.title {
+.title_wrapper {
-  font: $font_cell_title;
-  position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 10;
   padding: $gap;
-  text-transform: uppercase;
+  position: absolute;
+}
+
+.title {
+  font: $font_cell_title;
+  text-transform: uppercase;
+  word-break: break-word;
+
+  @include tablet {
+    font: $font_18_semibold;
+  }
 }

src/components/flow/FlowCellText/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 import { Markdown } from '~/components/containers/Markdown';
 import { DivProps } from '~/utils/types';
 import classNames from 'classnames';
@@ -7,12 +7,12 @@ import { formatText } from '~/utils/dom';
 
 interface Props extends DivProps {
   children: string;
-  title: string;
+  heading: string | ReactElement;
 }
 
-const FlowCellText: FC<Props> = ({ children, title, ...rest }) => (
+const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
   <div {...rest} className={classNames(styles.text, rest.className)}>
-    {title && <h4 className={styles.title}>{title}</h4>}
+    {heading && <div className={styles.heading}>{heading}</div>}
     <Markdown
       className={styles.description}
       dangerouslySetInnerHTML={{ __html: formatText(children) }}

src/components/flow/FlowCellText/styles.module.scss

@@ -5,8 +5,7 @@
   line-height: 1.3em;
 }
 
-.title {
+.heading {
-  font: $font_cell_title;
+  margin-bottom: 0.4em;
-  margin-bottom: $gap;
-  text-transform: uppercase;
 }
+