diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index 5d0a8f3..0ebd03f 100644 --- a/tildes/scss/modules/_comment.scss +++ b/tildes/scss/modules/_comment.scss @@ -242,27 +242,33 @@ @mixin flatten-single-replies-above-depth($depth) { // Makes it so that comments of the specified depth or greater will not indent - // their replies unless there is more than one reply. Instead, it adds text at the - // top of the next comment (the single reply) indicating that it's a direct reply to - // the above comment. + // their replies when they only have one reply *and* they're also the only reply to + // their parent (this avoids confusion between subtrees and siblings). + // When indenting is avoided, it adds text at the top of the next comment (the single + // reply) indicating that it's a direct reply to the above comment. - // We actually need the selector to check 1 level up from the specified starting + // We actually need the selector to check 2 levels up from the specified starting // depth because of how we're utilizing nesting. - $depth: $depth - 1; + @if ($depth < 2) { + @error "Starting depth must be at least 2"; + } + $depth: $depth - 2; .comment[data-comment-depth="#{$depth}"] { - .comment[data-comment-replies="1"] { - & > .comment-tree-replies { - margin-left: -1px; // compensate for border - - & > .comment-tree-item > .comment > .comment-itself { - & > .comment-text::before, - & > header > .is-comment-deleted::before, - & > header > .is-comment-removed::before { - content: "(Reply to above comment)"; - font-size: 0.6rem; - font-style: italic; - margin-right: 0.2rem; + .comment[data-comment-replies="1"] > .comment-tree-replies > .comment-tree-item { + & > .comment[data-comment-replies="1"] { + & > .comment-tree-replies { + margin-left: -1px; // compensate for border + + & > .comment-tree-item > .comment > .comment-itself { + & > .comment-text::before, + & > header > .is-comment-deleted::before, + & > header > .is-comment-removed::before { + content: "(Reply to above comment)"; + font-size: 0.6rem; + font-style: italic; + margin-right: 0.2rem; + } } } }