Fix public list of domain blocks being too verbose on about page (#11967)

app/javascript/styles/mastodon/about.scss

@@ -136,6 +136,47 @@ $small-breakpoint: 960px;
     }
   }
 
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    break-inside: auto;
+    margin-top: 24px;
+    margin-bottom: 32px;
+
+    thead tr,
+    tbody tr {
+      break-after: auto;
+      break-inside: avoid;
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      font-size: 1em;
+      line-height: 1.625;
+      font-weight: 400;
+      text-align: left;
+      color: $darker-text-color;
+    }
+
+    thead tr {
+      border-bottom-width: 2px;
+      line-height: 1.5;
+      font-weight: 500;
+      color: $dark-text-color;
+    }
+
+    th,
+    td {
+      padding: 8px;
+      align-self: start;
+      align-items: start;
+
+      &.nowrap {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 25%;
+      }
+    }
+  }
+
   & > :first-child {
     margin-top: 0;
   }

app/javascript/styles/mastodon/tables.scss

@@ -292,70 +292,3 @@ a.table-action-link {
     }
   }
 }
-
-.blocks-table {
-  width: 100%;
-  max-width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  table-layout: fixed;
-  border: 1px solid darken($ui-base-color, 8%);
-
-  thead {
-    border: 1px solid darken($ui-base-color, 8%);
-    background: darken($ui-base-color, 4%);
-    font-weight: 500;
-
-    th.severity-column {
-      width: 120px;
-    }
-
-    th.button-column {
-      width: 23px;
-    }
-  }
-
-  tbody > tr {
-    border: 1px solid darken($ui-base-color, 8%);
-    border-bottom: 0;
-    background: darken($ui-base-color, 4%);
-
-    &:hover {
-      background: darken($ui-base-color, 2%);
-    }
-
-    &.even {
-      background: $ui-base-color;
-
-      &:hover {
-        background: lighten($ui-base-color, 2%);
-      }
-    }
-
-    &.rationale {
-      background: lighten($ui-base-color, 4%);
-      border-top: 0;
-
-      &:hover {
-        background: lighten($ui-base-color, 6%);
-      }
-
-      &.hidden {
-        display: none;
-      }
-    }
-
-    td:first-child {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  th,
-  td {
-    padding: 8px;
-    line-height: 18px;
-    vertical-align: top;
-    text-align: left;
-  }
-}

app/views/about/_domain_blocks.html.haml

@@ -0,0 +1,10 @@
+%table
+  %thead
+    %tr
+      %th= t('about.unavailable_content_description.domain')
+      %th= t('about.unavailable_content_description.reason')
+  %tbody
+    - domain_blocks.each do |domain_block|
+      %tr
+        %td.nowrap= domain_block.domain
+        %td= domain_block.public_comment if display_blocks_rationale?

app/views/about/more.html.haml

@@ -55,19 +55,15 @@
 
             %p= t('about.unavailable_content_html')
 
-            - @blocks.each do |domain_block|
-              %p
-                %strong= "#{domain_block.domain}:"
-
-                - if domain_block.suspend?
-                  = t('about.unavailable_content_description.suspended')
-                - else
-                  = t('about.unavailable_content_description.silenced') if domain_block.silence?
-                  = t('about.unavailable_content_description.rejecting_media') if domain_block.reject_media?
-
-                - if display_blocks_rationale? && domain_block.public_comment.present?
-                  %strong= t('about.unavailable_content_description.reason')
-                  = domain_block.public_comment
+            - if (blocks = @blocks.select(&:reject_media?)) && !blocks.empty?
+              %p= t('about.unavailable_content_description.rejecting_media')
+              = render partial: 'domain_blocks', locals: { domain_blocks: blocks }
+            - if (blocks = @blocks.select(&:silence?)) && !blocks.empty?
+              %p= t('about.unavailable_content_description.silenced')
+              = render partial: 'domain_blocks', locals: { domain_blocks: blocks }
+            - if (blocks = @blocks.select(&:suspend?)) && !blocks.empty?
+              %p= t('about.unavailable_content_description.suspended')
+              = render partial: 'domain_blocks', locals: { domain_blocks: blocks }
 
   .column-4
     %ul.table-of-contents