-
-
-
-
-
+
+
+
+
+
+
+
);
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 6fe500b9d..10f6993e3 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -3,26 +3,27 @@
}
.comment {
+ font-size: var(--font-multiplier-small);
+ padding: var(--spacing-small) 0;
+ flex-direction: row;
display: flex;
- flex-direction: column;
- font-size: var(--font-small);
- padding: var(--spacing-small) 0 var(--spacing-small);
-
- &:first-of-type {
- padding-top: 0;
- }
+ &:not(:last-of-type) {
+ border-bottom: 1px solid var(--lbry-gray-1);
&:not(:last-of-type) {
border-bottom: 1px solid var(--color-border);
}
}
-.comment__meta {
- text-overflow: ellipsis;
- display: flex;
- justify-content: space-between;
- margin-bottom: var(--spacing-small);
+.comment__body_container {
+ padding: var(--spacing-small) 0;
+}
+.comment__meta {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ text-overflow: ellipsis;
time {
opacity: 0.3;
}
@@ -33,31 +34,21 @@
}
.comment__author {
- display: inherit;
- justify-content: left;
- vertical-align: center;
- flex: initial;
- padding-bottom: inherit;
-}
-
-.comment__author-thumbnail {
- flex-shrink: 1;
-}
-
-.comment__author-name {
margin-bottom: 1rem;
text-overflow: ellipsis; // This is where the magic happens
flex-basis: 400px;
flex-shrink: 1;
font-weight: 600;
- font-size: medium;
+}
+
+.comment__author-thumbnail {
+ display: inline-block;
}
.comment__time {
- flex: 1;
- align-self: flex-start;
flex-basis: 200px;
text-align: right;
+ justify-content: flex-end;
}
.comment__char-count {