Wrap pattern in <Row> to align with Patterns

Author: Sean Prashad

src/components/Table/index.js

@@ -154,14 +154,14 @@ const Table = () => {
                 .map(pattern => {
                   if (showPatterns[0] || checked[cellInfo.row.original.id]) {
                     return (
-                      <Badge key={pattern} className={pattern} pill>
+                      <Badge key={pattern} pill>
                         {pattern}
                       </Badge>
                     );
                   }
 
                   return (
-                    <Badge key={pattern} className={pattern} pill>
+                    <Badge key={pattern} pill>
                       ***
                     </Badge>
                   );
@@ -176,12 +176,14 @@ const Table = () => {
             Header: 'Difficulty',
             accessor: 'difficulty',
             Cell: cellInfo => (
-              <Badge
-                className={cellInfo.row.original.difficulty.toLowerCase()}
-                pill
-              >
-                {cellInfo.row.original.difficulty}
-              </Badge>
+              <Row>
+                <Badge
+                  className={cellInfo.row.original.difficulty.toLowerCase()}
+                  pill
+                >
+                  {cellInfo.row.original.difficulty}
+                </Badge>
+              </Row>
             ),
             Filter: SelectDifficultyColumnFilter,
           },