A few tweaks to the member detail page attribution data

- Changed how the links looked in both areas
- Made sure the layout didn't break with longer titles

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

ghost/admin/app/components/gh-member-details.hbs

@@ -49,7 +49,7 @@
                 {{#if (and @member.attribution @member.attribution.url @member.attribution.title) }}
                     <p>
                         {{svg-jar "satellite"}}
-                        <a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
+                        Attributed to&nbsp;<a href="{{@member.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @member.attribution.title }}</a>
                     </p>
                 {{/if}}
                 <p class="gh-member-last-seen">

ghost/admin/app/components/gh-member-settings-form.hbs

@@ -143,7 +143,7 @@
 
                             {{#each tier.subscriptions as |sub index|}}
                                 <div class="gh-membertier-subscription" data-test-subscription={{index}}>
-                                    <div>
+                                    <div class="gh-membertier-details-container">
                                         <div>
                                             {{#if sub.trialUntil}}
                                                 <span class="gh-cp-membertier-pricelabel">Free trial</span>
@@ -192,13 +192,12 @@
                                                 </div>
                                             {{/if}}
                                         {{/if}}
-                                        <div>
+                                        <div class="gh-membertier-details">
                                             <span class="gh-membertier-created">Created on {{sub.startDate}}</span>                                            
                                             {{#if (and sub.attribution sub.attribution.url sub.attribution.title) }}
                                                 <span class="gh-membertier-separator">·</span>
                                                 <span class="gh-membertier-started">Attributed to <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a></span>
                                             {{/if}}
-
                                         </div>
                                     </div>
 

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

@@ -722,13 +722,12 @@ label[for="member-description"] + p {
     flex-shrink: 0;
 }
 
-/* WIP style for attribution link*/
 .gh-member-details-meta p a {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    text-decoration: underline;
-    margin-left: 2px;
+    font-weight: 600;
+    color: var(--darkgrey);
 }
 
 .gh-member-details-meta svg path {
@@ -2166,16 +2165,17 @@ p.gh-members-import-errordetail:first-of-type {
     border-top: 1px solid var(--whitegrey);
 }
 
-.gh-membertier-created,
-.gh-membertier-started {
+.gh-membertier-details span,
+.gh-membertier-details a {
+    display: inline-block;
     color: var(--midgrey-d1);
     font-size: 1.25rem;
     font-weight: 500;
 }
 
-.gh-membertier-started a {
-    color: var(--black);
-    font-weight: 500;
+.gh-membertier-details a {
+    font-weight: 600;
+    color: var(--darkgrey);
 }
 
 .gh-membertier-separator {
@@ -2267,14 +2267,19 @@ p.gh-members-import-errordetail:first-of-type {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: stretch;
 }
 
 .gh-cp-membertier-renewal {
     color: var(--darkgrey-l1);
 }
 
+.gh-membertier-details-container {
+    flex: 1;
+}
+
 .gh-membertier-price-container {
+    flex: 0;
     display: flex;
     align-items: flex-start;
 }