Tidied up the styles for the member filtering

- Created a new tag type with max width
- Made sure tags didn't get to large for the box
- Double checked page or post title length

refs https://github.com/TryGhost/Team/issues/1832

ghost/admin/app/components/gh-resource-select.hbs

@@ -7,7 +7,7 @@
     @renderInPlace={{this.renderInPlace}}
     @onChange={{this.onChange}}
     @class="select-members"
-    @placeholder="Select a Post/Page"
+    @placeholder="Select a page or post"
     as |resource|
 >
     {{resource.name}}

ghost/admin/app/components/gh-token-input/trigger.hbs

@@ -18,11 +18,13 @@
             mouseDown=this.handleOptionMouseDown
             touchStart=this.handleOptionTouchStart
         }}
-            {{#if @selectedItemComponent}}
-                {{component @selectedItemComponent option=(readonly opt) select=(readonly @select)}}
-            {{else}}
-                {{yield opt @select}}
-            {{/if}}
+            <span class="ember-power-select-multiple-inner-text">
+                {{#if @selectedItemComponent}}
+                    {{component @selectedItemComponent option=(readonly opt) select=(readonly @select)}}
+                {{else}}
+                    {{yield opt @select}}
+                {{/if}}
+            </span>
             {{#unless @select.disabled}}
                 <span role="button"
                     aria-label="remove element"

ghost/admin/app/components/members/filter.hbs

@@ -13,7 +13,7 @@
         </span>
     </dd.Trigger>
 
-    <dd.Content class="gh-member-actions-menu gh-filter-builder gh-members-filter-builder dropdown-menu dropdown-triangle-top-right">
+    <dd.Content class="gh-member-actions-menu gh-filter-builder gh-members-filter-builder {{if this.feature.memberAttribution 'feature-memberAttribution'}} dropdown-menu dropdown-triangle-top-right">
         <h3>Filter list</h3>
         <section class="gh-filters">
             {{#each this.filters as |filter index|}}

ghost/admin/app/styles/components/filter-builder.css

@@ -145,6 +145,7 @@
 
 .gh-filter-builder .ember-power-select-trigger-multiple-input {
     height: 23px;
+    display: flex;
 }
 
 @media (max-width: 690px) {

ghost/admin/app/styles/components/power-select.css

@@ -38,7 +38,7 @@
 
 .ember-power-select-dropdown {
     position: absolute;
-    z-index: 1000;
+    z-index: 9999;
     box-sizing: border-box;
     margin: 0;
     border: var(--input-border);
@@ -217,18 +217,37 @@
 }
 
 .ember-power-select-multiple-option {
-    margin: 2px;
-    padding: 2px 6px 3px;
+    margin: 2px!important;
+    padding: 1px 6px 2px;
     border-radius: 3px;
     font-size: 0.93em;
     font-weight: 500;
     border: 1px solid transparent;
-    color: var(--darkgrey);
-    background: var(--whitegrey-d1);
+    color: var(--white);
+    background: var(--black);
+    display: flex;
+    flex-direction: row;
+    justify-items: start;
+    align-items: center;
+    height: 23px;
+}
+
+.ember-power-select-multiple-inner-text {
+    display: inline-block;
+    white-space: nowrap;
+    max-width: 155px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1em;
 }
 
 .ember-power-select-multiple-remove-btn {
     padding: 2px;
+    width: 10px;
+    height: 10px;
+    line-height: 0;
+    margin-left: 4px;
 }
 
 .ember-power-select-multiple-remove-btn:not(:hover) {
@@ -242,8 +261,8 @@
 
 .ember-power-select-multiple-remove-btn svg path {
     stroke-width: 2px;
-    stroke: var(--black);
-    fill: var(--black);
+    stroke: var(--white);
+    fill: var(--white);
 }
 
 .ember-power-select-trigger-multiple-input {

ghost/admin/app/styles/layouts/members.css

@@ -2335,6 +2335,10 @@ p.gh-members-import-errordetail:first-of-type {
     margin-top: 8px;
 }
 
+.gh-members-filter-builder.feature-memberAttribution {
+    width: 780px;
+}
+
 @media (max-width: 980px) {
     .gh-members-filter-builder {
         width: 640px;