I've been struggling with my first attempt at using Tampermonkey, obviously. The bato.to comment section loads only the first 280 or so pixels of images on PC, which I'd like to about double to get closer to the mobile view most users have. After finding the right variable to do that I've been now struggling to make the change permanent; Tampermonkey seems to be the easiest solution, but I'm not remotely familiar enough with the "new" F12 layout and website coding in general to make any of the user scripts I've been able to find work for this.
F12 view on the website Basically, all I want to do, is, within
<div class="max-h-80 overflow-y-hidden">
to change
.max-h-80 {
max-height: 20rem;
I was sadly yet of unable to find any help for as to how to make this work. max-height doesn't get accepted as a functioning variable, and the solutions I've found that use maxHeight instead don't function in actually changing the value on the website.
What you want to change is the style of the page aka CSS. There are many ways to do this with Tampermonkey, the simplest way is GM_addStyle.
The important part is matching the correct window, in this case the comments are in their own iframe with a url like this: https://bato.to/embeds/comments?comicId=XXXXX&chapterId=XXXXXXX.
To match all urls of that format you can use: https://bato.to/embeds/comments*
// ==UserScript==
// @name expand bato.to comments
// @namespace http://tampermonkey.net/
// @version 0.1
// @description .
// @author You
// @match https://mangatoto.com/embeds/comments*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bato.to
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle('.max-h-80:not(.max-h-unset) { max-height: unset;}');
GM_addStyle inserts a new Style element with the css .max-h-80:not(.max-h-unset) { max-height: unset;}, this selector will match all the elements that have a class max-h-80 but NOT max-h-unset and sets their max-height to unset.
To set a specific max-height just change unset to any valid value, eg: max-height: 100rem;