One of the difficulties with a nested/tree commenting system is finding a way to deal with threads that get very "deep", when people continue replying back and forth under the same threads. The deep threads end up getting indented very far, and this looks bad, can be hard to follow, and wastes a ton of space (especially on smaller screens like phones).

I'm not a huge fan of any of the ways that I've seen other sites try to handle this, so I've been trying to figure out if there might be any other possibilities that would work well. I've noticed that in most of the cases where a thread gets very deep, a lot of the depth comes from back-and-forth replies, where there's only one comment on each "level". So I'm testing a method that will flatten those sections out and just put a note on each comment that it's a direct reply to the comment above it.

Specifically, the current method (which is now live), works like this: if a comment is at least 4 levels deep and only has a single reply, don't indent the reply any further. Instead, keep the reply at the same indentation and add a note at the top of it indicating that it's a reply to the above comment.

I managed to implement this entirely through CSS, by writing what's probably the worst best chunk of CSS (really, SASS) of my life, which I want to show off here. If you don't know CSS and can't read this, trust me, you're better off:

.comment:not([data-comment-depth="0"]):not([data-comment-depth="1"]):not([data-comment-depth="2"]):not([data-comment-depth="3"]) {
  &[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;
        }
      }
    }
  }
}

One of the really interesting things about implementing this entirely in CSS is that we can easily change what level it happens at based on screen size. So I have it set to always start at depth >= 4 right now to help with testing and deciding whether it works well or not, but if we decide to keep it I could easily change the threshold to higher on desktop and keep it lower on smaller screens.

As an example of how it works, the previous ~tildes.official thread works really well. @Amarok and @cfabbro had a long discussion about music metadata that went very deep. The thread ends up 16 levels deep, but this new change makes it so that it only indents by 5 levels instead of 16. Here's a comparison between how the end of the thread looks on my phone: before this change vs. after this change (yes, something's not quite right with the indentation lines yet).

Let me know what you think. I'm mostly concerned that this might make it a little harder to follow long threads since the information from the indentation is lost, but I think we need to test it out in real threads for a while to see if that actually ends up being significant or just takes a bit of getting used to.