[UI] Show all body tags

1 files changed, 55 insertions, 29 deletions

diff --git a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
index 2976f6807..562be1975 100644
--- a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
@@ -2,7 +2,8 @@
   margin-bottom: 1em;
 }
 
-.status__notice-wrapper:empty {
+.status__notice-wrapper:empty,
+.status__footers:empty {
   display: none;
 }
 
@@ -23,45 +24,70 @@
   }
 }
 
-.status__permissions {
+.status__footers {
   font-size: 12px;
   margin-top: 1em;
 
-  & > summary {
-    font-size: 12px;
-
-    &:focus, &:active {
-      outline: none;
+  & > details {
+    & > summary {
+      &:focus, &:active {
+        outline: none;
+      }
+    }
+    
+    & > summary > span,
+    & > ul > li > span,
+    & > ul > li > a {
+      color: lighten($dark-text-color, 4%);
+      padding-left: 8px;
     }
   }
 
-  & > summary > span,
-  & > ul > li > span {
-    color: lighten($dark-text-color, 4%);
-    padding-left: 8px;
-  }
-
-  & > ul > li > span > span:first-child {
-    display: inline-block;
-    text-transform: capitalize;
-    min-width: 5em;
-  }
+  .status__tags {
+    & > ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
 
-  & > summary > i {
-    color: #999966;
-  }
+    & > ul > li {
+      list-style: none;
+      display: inline-block;
+      width: 50%;
+    }
 
-  & > ul > li.permission-status > i {
-    color: #99cccc;
+    & > summary > i,
+    & > ul > li > i {
+      color: #669999;
+    }
   }
 
-  & > ul > li.permission-account > i {
-    color: #cc99cc;
-  }
+  .status__permissions {
+    & > summary > i {
+      color: #999966;
+    }
 
-  & > ul > li > span > span,
-  & > ul > li > span > code {
-    color: lighten($primary-text-color, 30%);
+    & > ul > li {
+      &.permission-status > i {
+        color: #99cccc;
+      }
+
+      &.permission-account > i {
+        color: #cc99cc;
+      }
+
+      & > span {
+        & > span, & > code {
+          color: lighten($primary-text-color, 30%);
+        }
+
+        & > span:first-child {
+          display: inline-block;
+          text-transform: capitalize;
+          min-width: 5em;
+        }
+      }
+    }
   }
 }