From 488b85855f8784608a23d5b2f965fd39557bac18 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Tue, 6 Aug 2019 11:49:01 -0500
Subject: [PATCH] limit table cells from wrapping more than 2 lines

---
 .../src/modules/allListsTable/AllListsTable.css      | 12 ++++++++++++
 .../src/modules/allListsTable/AllListsTable.tsx      |  9 ++++++---
 .../src/shared/SubscribeButton.css                   |  4 ++++
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.css

diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.css b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.css
new file mode 100644
index 000000000..678542d7c
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.css
@@ -0,0 +1,12 @@
+/* limit table cells from wrapping more than 2 lines */
+/* https://stackoverflow.com/a/13924997/2343739 */
+/* https://stackoverflow.com/a/22042054/2343739 */
+td > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 1.5;
+  max-height: 3em;
+}
diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx
index a0cef8284..9a86cf2d8 100644
--- a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx
+++ b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx
@@ -2,6 +2,7 @@ import { Table } from 'antd';
 import * as React from "react";
 import { SubscribeButton } from '../../shared/';
 import { nameof } from '../../utils';
+import './AllListsTable.css';
 import { List } from './List';
 
 interface State {
@@ -34,15 +35,17 @@ export class AllListsTable extends React.Component<{}, State> {
           title="Name"
           dataIndex={nameof<List>("name")}
           width={250}
-          fixed="left" />
+          fixed="left"
+          render={(text: string) => <div>{text}</div>} />
         <Table.Column<List>
           title="Description"
-          dataIndex={nameof<List>("description")} />
+          dataIndex={nameof<List>("description")}
+          render={(text: string) => <div>{text}</div>} />
         <Table.Column<List> title="Subscribe"
           dataIndex={nameof<List>("viewUrl")}
           width={123}
           fixed="right"
-          render={(text: string, record: List, index: number) => <SubscribeButton key={index} viewUrl={text} viewUrlMirrors={record.viewUrlMirrors} name={record.name} />}
+          render={(text: string, record: List, index: number) => <div><SubscribeButton key={index} viewUrl={text} viewUrlMirrors={record.viewUrlMirrors} name={record.name} /></div>}
         />
       </Table>
     );
diff --git a/src/FilterLists.Web.V2/src/shared/SubscribeButton.css b/src/FilterLists.Web.V2/src/shared/SubscribeButton.css
index 33ae6340d..db1b2b5e0 100644
--- a/src/FilterLists.Web.V2/src/shared/SubscribeButton.css
+++ b/src/FilterLists.Web.V2/src/shared/SubscribeButton.css
@@ -3,3 +3,7 @@
 .ant-dropdown-menu-submenu-title > a {
   color: #fff;
 }
+
+span {
+  z-index: 1000000;
+}