From 7cc49b4b70c5b96135ad725095c00eb0634e9202 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peterzimon@MacBook-Pro-2.local>
Date: Tue, 7 Jul 2020 13:29:44 +0200
Subject: [PATCH] Added long data handling to member import UI

no refs.
- added styles to handle long data for field and data cells in members import mapping table
---
 .../app/components/gh-members-import-table.hbs    |  8 ++++----
 ghost/admin/app/styles/layouts/members.css        | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-import-table.hbs b/ghost/admin/app/components/gh-members-import-table.hbs
index a98cbe4f34..f23722a065 100644
--- a/ghost/admin/app/components/gh-members-import-table.hbs
+++ b/ghost/admin/app/components/gh-members-import-table.hbs
@@ -1,8 +1,8 @@
 <table class="f8 gh-members-import-table ma0">
     <thead>
         <tr>
-            <th><span class="f-small midgrey ttu fw5">Field</span></th>
-            <th>
+            <th class="table-cell-field"><span class="f-small midgrey ttu fw5">Field</span></th>
+            <th class="table-cell-data">
                 <div class="flex items-center justify-between">
                     <span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
                     <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
@@ -17,8 +17,8 @@
     <tbody>
         {{#each currentlyDisplayedData as |row|}}
             <tr>
-                <td class="middarkgrey"><span>{{row.key}}</span></td>
-                <td class="middarkgrey {{unless row.value "empty-cell"}}"><span>{{row.value}}</span></td>
+                <td class="middarkgrey table-cell-field"><span>{{row.key}}</span></td>
+                <td class="middarkgrey table-cell-data {{unless row.value "empty-cell"}}"><span>{{row.value}}</span></td>
                 <td><span><GhMembersImportMappingInput @updateMapping={{this.updateMapping}} @mapFrom={{row.key}} @mapTo={{row.mapTo}} /></span></td>
             </tr>
         {{else}}
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index afa4d4eda5..846db4d86a 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -564,9 +564,10 @@ p.gh-members-import-errordetailtext {
 }
 
 .gh-members-import-table td {
-    padding: 6px 8px;
+    padding: 7px 8px 6px;
     border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
     border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+    vertical-align: top;
 }
 
 .gh-members-import-table tr td:first-of-type,
@@ -603,7 +604,7 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-import-member-select select {
-    height: 36px;
+    height: 34px;
     border: none;
     font-size: 1.3rem;
     line-height: 1em;
@@ -630,7 +631,15 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-import-member-select svg {
-    right: 8px;
+    right: 9px;
+}
+
+.gh-members-import-table th.table-cell-field,
+.gh-members-import-table td.table-cell-field,
+.gh-members-import-table th.table-cell-data,
+.gh-members-import-table td.table-cell-data {
+    max-width: 180px;
+    overflow-wrap: break-word;
 }
 
 /* Fixing Firefox's select padding */