[Glitch] Fix public list of domain blocks being too verbose on about page

Port SCSS from bd9685f7980838ecc675af20cf52ef1e686d98d6 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

2 files changed, 41 insertions, 67 deletions

diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 994e80280..7c129674d 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/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;
   }
diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss
index 669f72787..b84f6a708 100644
--- a/app/javascript/flavours/glitch/styles/tables.scss
+++ b/app/javascript/flavours/glitch/styles/tables.scss
@@ -288,70 +288,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;
-  }
-}