Fix long domain block descriptions breaking table layout (#12029)

diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 1dd8b79541fb915e24d5c0eaa5b818e335f132a2..cf16b54ac179acac973d9d4e654f0f8f6476e03e 100644 (file)
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -145,8 +145,6 @@ $small-breakpoint: 960px;
 
     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;
@@ -167,12 +165,25 @@ $small-breakpoint: 960px;
       padding: 8px;
       align-self: start;
       align-items: start;
+      word-break: break-all;
 
       &.nowrap {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         width: 25%;
+        position: relative;
+
+        &::before {
+          content: ' ';
+          visibility: hidden;
+        }
+
+        span {
+          position: absolute;
+          left: 8px;
+          right: 8px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
   }

diff --git a/app/views/about/_domain_blocks.html.haml b/app/views/about/_domain_blocks.html.haml
index 940bcb9344662f049930586176bc536a66584f0a..e0c5df41d632aa82219911c14db70af38e5be4f3 100644 (file)
--- a/app/views/about/_domain_blocks.html.haml
+++ b/app/views/about/_domain_blocks.html.haml
@@ -6,5 +6,7 @@
   %tbody
     - domain_blocks.each do |domain_block|
       %tr
-        %td.nowrap= domain_block.domain
-        %td= domain_block.public_comment if display_blocks_rationale?
+        %td.nowrap
+          %span{ title: domain_block.domain }= domain_block.domain
+        %td
+          = domain_block.public_comment if display_blocks_rationale?