From d2f0b82558c17a90ca0a148051e96001cd666f31 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 3 Sep 2018 10:13:08 -0500
Subject: [PATCH] add tag line breaks

ref #65
---
 src/FilterLists.Web/ClientApp/components/Home.tsx | 2 +-
 src/FilterLists.Web/ClientApp/css/site.css        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 20610bb85..02b7a2e34 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -98,7 +98,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                            filterMethod: (filter: any, row: any) => row[filter.id].map((e: any) => e.name).join()
                                .toUpperCase().includes(filter.value.toUpperCase()),
                            sortMethod: (a: any, b: any) => a.join().toUpperCase() > b.join().toUpperCase() ? 1 : -1,
-                           Cell: (cell: any) => <div>{cell.value.map(
+                           Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
                                (e: any) => <span className="badge" style={{
                                    backgroundColor: `#${e.colorHex}`,
                                    color: ListDetails.getContrast(`${e.colorHex}`)
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index 70ece4b2c..7c74e7364 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -7,6 +7,11 @@ body, h2, h3, h4, h5, blockquote { font-size: 16px; }
     align-items: center;
 }
 
+.fl-tag-container {
+    line-height: 1;
+    white-space: normal;
+}
+
 div.rt-tbody, div.rt-thead.-filters, div.rt-thead.-header { min-width: 320px !important; }
 
 .fl-btn-details-action {