4
[Solved] How to get rid of the arrows at the bottom of comments which collapse/expand the text? (kbin.social)
submitted 10 months ago* (last edited 9 months ago) by speck@kbin.social to c/kbinMeta@kbin.social
29 comments fedilink hide all child comments

They always obscure part of the text, no matter what. I juat want the full text.

nb that I use KES so maybe that's where the issue is?

Edit: should probably mention that this is on mobile, android

Edit 2: the code snippet below, provided by @pamasich, seems to have fixed the issue. I added it to my mobile browser (Firefox nightly) via the Stylus add-on:

div.more:not(:nth-child(1 of .more)) {
    display: none;
}

Edit 3: Latest KES update seems to have fixed the issue. More deets here: https://kbin.social/m/enhancement/t/777616 Thanks @shazbot

you are viewing a single comment's thread
view the rest of the comments
[-] Pamasich@kbin.social 2 points 10 months ago

I know what they mean, because I have the same issue on my work pc (but not at home). I forgot it happens because the personal userstyle I'm using includes CSS to fix this issue entirely.

@speck get yourself Stylus if you don't have it already and try this CSS which works perfectly for me:

div.more:not(:nth-child(1 of .more)) {
    display: none;
}

Can't guarantee it works with kbin's built in custom CSS functionality, as that one seems to filter out some selectors (no logic behind which).

@shazbot
Basically, what happens without that CSS is that

  1. Clicking the bar once scrolls me down a bit but otherwise does absolutely nothing.
  2. Clicking the bar again turns the arrow upwards and spawns a new bar above the existing one.
  3. Clicking the upper bar repeats step 1.
  4. Clicking the upper bar again turns the arrow upwards but doesn't spawn another bar, nor does it do anything else.
  5. Clicking the lower bar removes the upper one again and turns the arrow back downwards.

At no point is the comment ever expanded. When OP says it obscures text, that's just the default state where only x lines of the comment are shown and the bar covers the last line(s). The issue is the comment can't be expanded, so it keeps obscuring the text even when clicked as nothing actually moves.

Looking at the HTML source, I can see five instances of the bar existing at once on the same comment.

I tested just now to turn off my scripts one by one and KES was the culprit. Disabling it fixed the issue. I'll try checking which feature is causing it.

[-] Pamasich@kbin.social 2 points 10 months ago* (last edited 10 months ago)

@shazbot @speck

For me, the culprit is the collapsible comments mod (or the standalone script if you're using that one).

edit: The root cause seems to be lines 182 to 190. But the actual troublemaker appears to be on kbin's side, not KES. When the mod's main function finishes, the comment still only has only one .more element like when it began.

I've disabled all other mods and userscripts, so it's not one of those. Also just tried to disable KES (and even the monkey) entirely, running the script from the console instead. No change either, it's still happening.

The code fragment in question copies the comment into a new children container. I'm thinking this probably makes some part of kbin confused, leading to the issues we're seeing.
It might be best to just include the userstyle I'm using in the CSS added by the mod.

This is the code between lines 182 and 190, removing which prevents the issue:

let children = previousComment.querySelector('.children');
if (!children) {
    // If not, create one
    children = document.createElement('div');
    children.className = 'children';
    previousComment.appendChild(children);
}
// Insert comment into children container
children.prepend(comment);
[-] shazbot@kbin.social 3 points 10 months ago* (last edited 10 months ago)

@Pamasich @speck

I have completed an audit of the mod and observed the following issues:

  1. Does not properly unset classes and restore the page to an intact state when turned off: this was having the side effect of making the threaded lines look incorrect when toggling on/off in place. The mod should not leave dangling containers around after it is toggled off. The mod creates an outer container so that the "expando" lines flow all the way down through the child elements, but when turned off, these child elements need to be moved back out of the container to be adjacent to each other and the container removed. => Fixed locally.

  2. Does not properly unset event listeners attached to nested comments. Same as above, tends to leave dangling listeners and does not unset itself cleanly. => In progress.

  3. Because it physically manipulates the DOM and moves sub-comments into their own container down the tree, triggers an event (likely a bug) on Kbin's side whereby any time the DOM is updated for that element, Kbin appends a more element (text expansion button) if the text overflows a certain length, even if a more element is already present. You can test this by creating a dummy div above or below a long comment and then moving the long comment before or after that div. Simply moving its position in the DOM will trigger the creation of another more element inside. And because the mod puts each comment into its own container for the purposes of threading nested chains of comments, this will trigger the creation of as many mores as there are indendation levels. So for a comment chain 5 replies deep, there will be 5 mores. This is further exacerbated when toggling the mod on and off, since these mores are not getting wiped and will just keep getting stacked up. Since this is also an upstream issue, our only alternative here is to walk through the tree and remove the extraneous more elements after nesting occurs. This is similar to your CSS solution, but instead of masking them, physically deletes them, otherwise we will have a constantly growing tree of mores every time nesting happens. I guess this should also be reported upstream as well. Kbin seems to expect no DOM manipulation to occur, which is reasonable, I suppose, but might be better if the callback doesn't insert the more element at all if it's already present. => Easy fix on the Kbin side, in progress.

[-] shazbot@kbin.social 2 points 10 months ago

@Pamasich

I have resolved the aforementioned issues with a hotfix on the testing branch; please test when time permits. Executive summary:

  1. The mod fully restores the DOM tree to its original state when toggled off. It is now possible to toggle the mod on and off on the same page without reloading, and changes will behave as expected.
  2. For reasons of security, the mod no longer allows clicking the post headers or post body as a means of collapsing/expanding comments. This was attaching unnecessary listeners to elements on the page, with no way of clearing them when toggled off (besides hard refreshing). Now the only approved way of expanding/collapsing is to use the +/- icon or colored bars.
  3. The mod erroneously modified the CSS of profile pictures to give them rounded borders, which was unspecified by its intended behavior and documented nowhere in the description. Now they conform to the standard square format.
  4. The superfluous mores are being removed now for comments with overflow text. What I thought would be a quick fix turned into hours, and I thought I was losing my marbles over this one for a long time, since the tree clearly showed numerous duplicate mores, but only one per comment was being shown at runtime of the script. At first, I did not seriously think that the mod was completing its runtime cycle prior to the duplicate mores being spawned, but indeed this is what was happening. For now, I have added a 20ms sleep before clearing the extra mores, and this seems to suffice to let them propagate before the mod can continue with the cleanup phase. This seems satisfactory for now, short of attaching observers to wait for the duplicate mores to appear.

I believe that covers everything. It should be possible to switch the mod on and off at will now and see no adverse effect.

[-] Pamasich@kbin.social 2 points 10 months ago

Teardown isn't working for me, tried multiple devices and turned my custom styling off.

After teardown this is how the site looks like to me. Also, it seems you need to remove the mores on teardown too. The more issue is now fixed when the mod is active, but appears again after teardown.

[-] shazbot@kbin.social 2 points 10 months ago

You're right, looks like I missed something that was obscured by custom styling.

And good catch on the mores appearing on teardown. This mod is turning out to be quite a beast. Thanks for testing.

[-] shazbot@kbin.social 2 points 10 months ago* (last edited 10 months ago)

I had just forgotten something simple (unload the threaded comments CSS):

Before:

removeDangling();
safeGM("removeStyle", "hide-defaults");

After:

removeDangling();
clearMores();
safeGM("removeStyle", "hide-defaults");
safeGM("removeStyle", "threaded-comments");

This is live on testing, but might take a sec to propagate due to GitHub's caching feature.

[-] Pamasich@kbin.social 2 points 10 months ago

This works for me now.

[-] shazbot@kbin.social 2 points 10 months ago* (last edited 10 months ago)

Thanks for looking into this. I've been meaning to audit this mod, but was a bit busy this week. In light of this report, this seems like as good a time as any.

Unfortunately, the mod is no longer maintained by the original author, so I'll have to inherit it and refactor it. I feel it is overengineered for what it attempts to do, so it should be streamlined and the aforementioned issues fixed. I am also aware of the issue that the mod fails to unset itself properly when turned off. I am really not satisfied with its current functionality.

Root cause analysis and solutions are described in a subsequent comment

[-] speck@kbin.social 2 points 10 months ago

Great breakdown of the issue!

I have screenshots of the phenomena in another comment:

https://kbin.social/m/kbinMeta/t/762229/-/comment/4603033

That code snippet seems to work I'm new to stylus, but I think I did it correctly and it allowed me to expand and read your two longer comments here. Thank you for that!

[-] Pamasich@kbin.social 2 points 10 months ago

Great to hear the CSS works on mobile too!

I think you pressed the wrong button when you tried to upvote my comment, I can see a downvote there from you.

[-] speck@kbin.social 1 points 10 months ago

Fixed that, sorry

this post was submitted on 14 Jan 2024
4 points (100.0% liked)

/kbin meta

2 readers
1 users here now

Magazine dedicated to discussions about the kbin itself. Provide feedback, ask questions, suggest improvements, and engage in conversations related to the platform organization, policies, features, and community dynamics. ---- * Roadmap 2023 * m/kbinDevlog * m/kbinDesign

founded 1 year ago