How can I add "n" pixels to an element's width? (YouTube auto-chapters)

[Stevoisiak]

I am trying to create a filter to hide the AI-generated auto-chapters on YouTube videos. (Example)

One issue is that the playback bar gets segmented into sections with small gaps between them. The gap is determined by a margin-right CSS style.

Setting margin-right to 0px removes the gaps, but it also desyncs the playback bar from the actual video length since the width no longer matches.

To properly remove the gaps, I also need to add 4px to the width of each chapter segment. IE: something like:

www.youtube.com##.ytp-chapter-hover-container:style(margin-right: 0px !important;)
www.youtube.com##.ytp-chapter-hover-container:style(width: {initial}+4px !important;)

(Note: The chapters can also be removed with json-edit and edit-object-on-setter, but edit-object causes conflicts with YouTube adblocking rules)

Is there some way to add to the existing width of an element rather than overriding it completely?

[stephenhawk8054]

@gorhill I can't test properly right now but looks like using edit-object-on-setter and set on the same object could cause conflicts (in YouTube case, the set becomes not work and video has ads when loaded directly).

[gorhill]

As we are nearing a stable release, I will look into this in next dev cycle as the potential for regression to fix this is very high as this requires to refactor set-constant to centrally manage all getters/setters from various scriptlets. This is also a challenge in uBO Lite as scriptlets from a ruleset do not know the existence of scriptlets from another rulesets -- though I will be looking at possible workarounds for this.

[krystian3w]

Maybe changing to the padding will work?

www.youtube.com##.ytp-chapter-hover-container:style(margin-right: 0px !important; padding-right: 4px !important;)

[Stevoisiak]

The playback bar doesn't un-sync, but the chapter segments still appear. Also, the last chapter segment is blank.