add WordWrap and wrap question content in this component

src/features/QuestionsPage/components/WordWrap/WordWrap.tsx

@@ -0,0 +1,25 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const WordWrap = ({ children }: Props) => {
+  const classes = useStyles();
+  return <span className={classes.wordWrap}>{children}</span>;
+};
+
+const useStyles = makeStyles(() => ({
+  wordWrap: {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    '-ms-word-break': 'break-all',
+    wordBreak: 'break-word',
+    '-ms-hyphens': 'auto',
+    '-moz-hyphens': 'auto',
+    '-webkit-hyphens': 'auto',
+    hyphens: 'auto',
+  },
+}));
+
+export default WordWrap;

src/features/QuestionsPage/constants.tsx

@@ -1,6 +1,7 @@
 import { decodeSort } from 'libs/serialize-query-params/SortParam';
 import { Column } from 'common/Table/types';
 import { Question } from 'libs/graphql/types';
+import WordWrap from './components/WordWrap/WordWrap';
 
 export const DEFAULT_SORT = decodeSort('id DESC');
 export const COLUMNS: Column<Question>[] = [
@@ -18,6 +19,9 @@ export const COLUMNS: Column<Question>[] = [
     field: 'content',
     sortable: true,
     label: 'Treść',
+    valueFormatter: v => {
+      return <WordWrap>{v.content}</WordWrap>;
+    },
   },
   {
     field: 'qualification',