Improve 'moderator-block' list visuals

- Added "Blocked on behalf of" to make things clearer.
- Use smaller ClaimPreview for delegators to save space (there might be lots of delegators)

ui/page/listBlocked/view.jsx

@@ -133,11 +133,14 @@ function ListBlocked(props: Props) {
             {delegatorUrisForBlockedUri.map((delegatorUri) => {
               return (
                 <div className="block-list--delegator" key={delegatorUri}>
-                  <ul className="section content__non-clickable">
-                    <ClaimPreview uri={delegatorUri} hideMenu hideActions type="small" />
+                  <label>{__('Blocked on behalf of:')}</label>
+                  <ul className="section">
+                    <div className="content__non-clickable">
+                      <ClaimPreview uri={delegatorUri} hideMenu hideActions type="inline" properties={false} />
+                      {moderatorTimeoutMap[uri] && getBanInfoElem(moderatorTimeoutMap[uri])}
+                    </div>
+                    <ChannelBlockButton uri={uri} blockLevel={BLOCK_LEVEL.MODERATOR} creatorUri={delegatorUri} />
                   </ul>
-                  <ChannelBlockButton uri={uri} blockLevel={BLOCK_LEVEL.MODERATOR} creatorUri={delegatorUri} />
-                  {moderatorTimeoutMap[uri] && getBanInfoElem(moderatorTimeoutMap[uri])}
                 </div>
               );
             })}

ui/scss/component/_block-list.scss

@@ -15,6 +15,33 @@
   .button--secondary {
     margin-top: var(--spacing-xxs);
   }
+
+  .claim-preview__wrapper {
+    border-bottom: none !important;
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .claim-preview--inline {
+    .channel-thumbnail {
+      @include handleChannelGif(3rem);
+    }
+  }
+
+  .claim-preview__title {
+    font-size: var(--font-small);
+  }
+
+  .channel-name {
+    font-size: var(--font-xsmall);
+  }
+
+  .section {
+    margin-left: var(--spacing-m);
+  }
+
+  label {
+    font-style: italic;
+  }
 }
 
 .block-modal--values {