Change layout of public profile directory to be the same as in web UI (#11705)

3 files changed, 27 insertions, 2 deletions

diff --git a/app/javascript/mastodon/features/directory/components/account_card.js b/app/javascript/mastodon/features/directory/components/account_card.js
index a9c9976be..cb23a02ba 100644
--- a/app/javascript/mastodon/features/directory/components/account_card.js
+++ b/app/javascript/mastodon/features/directory/components/account_card.js
@@ -119,7 +119,7 @@ class AccountCard extends ImmutablePureComponent {
     return (
       <div className='directory__card'>
         <div className='directory__card__img'>
-          <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' className='parallax' />
+          <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
         </div>
 
         <div className='directory__card__bar'>
@@ -134,7 +134,7 @@ class AccountCard extends ImmutablePureComponent {
         </div>
 
         <div className='directory__card__extra'>
-          {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content' dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} />}
+          <div className='account__header__content' dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} />
         </div>
 
         <div className='directory__card__extra'>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 1129680f1..d7e90fcaf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5367,6 +5367,7 @@ a.status-card.compact:hover {
       height: 125px;
       position: relative;
       background: darken($ui-base-color, 12%);
+      overflow: hidden;
 
       img {
         display: block;
@@ -5388,6 +5389,7 @@ a.status-card.compact:hover {
         display: flex;
         align-items: center;
         text-decoration: none;
+        overflow: hidden;
       }
 
       &__relationship {
@@ -5453,6 +5455,7 @@ a.status-card.compact:hover {
         padding: 15px 10px;
         border-bottom: 1px solid lighten($ui-base-color, 8%);
         width: 100%;
+        min-height: 18px + 30px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -5464,6 +5467,10 @@ a.status-card.compact:hover {
             display: inline;
           }
         }
+
+        br {
+          display: none;
+        }
       }
     }
   }
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 2b6794ee2..e769c495b 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -763,6 +763,24 @@
     }
   }
 
+  .directory__list {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      display: block;
+    }
+
+    .icon-button {
+      font-size: 18px;
+    }
+  }
+
+  .directory__card {
+    margin-bottom: 0;
+  }
+
   .card-grid {
     display: flex;
     flex-wrap: wrap;