I don't use social media that much anymore, but I saw this and I remembered ,,Hey I modified that one's code to work better on mobile" so I thought I would share how I did it!
(Disclaimer; I don't know how to code in CSS, I've only coded in C++ and thus mostly just... Deleted code and shortened the words, so if you can make this work better/in a not half baked way, then please do share!) This is basically how it looks;
For starters, install the extension the same way you would on a PC, it was the exact same procedure if I remember correctly (at least on Firefox, can't speak for Chrome)
Then you should be able to: go to extensions -> [whatever you used to run the code, in my case TamperMonkey] -> settings -> Installed Userscripts, and be able to see the and edit the code of the comment box script
Once there I went to shorten the text (as I have no idea how to properly set the sizes of everything) which is this line right here!
Just shorten what's in between the " ", without deleting them, I personally went with "Insert" only, but you can replace it with any text (shorter or more specific if you need!)
(Tiny side note here, when i comment quoting the Fanfic, I personally use the <blockquote> command and not the <i>, so if you want to change that instead of reviewing it manually, down there on line number 357 you can change the <i> </i> for the command you may use!)
For the "Add to Comment Box", I just shortened it to "Add" here on line 339
I had no idea how to edit the size of the "Font Size" bar, and just... Scrapped the code that displays it. Which is not the best thing to do, but I don't know this coding language and it was my best attempt; here from line 205 to line 222, delete it all
For the other commands, I just shortened them from "Delete" to "Del", "Full Chapter" to "Full", and "By Chapter" to "Chp" in the lines 273, 305, and 306 respectively;
And lastly! Once I had done all this, I noticed it was noticeably better, but now the box is too big for my screen! If this is a problem for you as it was me, you can change the outside box's size here;
(personally lowered it to "95%" and it worked perfectly fine, you can experiment with the other commands of this however to make it as long, short, tall or whatever else you may need!)
Note I did this all in my phone backtracking to my laptop's code, so this could definitely be better, and be done better first in a computer and then passed to phone. But essentially, that is all!!
Last couple of notes here, I changed both the "0" and "X" for opening/closing the box to ":3" and "xP" in the code because I just like it that way okay. (Change both "0"s that are there, as one is the first-time-appearing "0" and the second being the one that stays once you've already closed the box)
As well as also changing the blue colour of the select boxes to green, because I like green. These are the (easy) changeable hex codes for colour edition! The bed code next to primary is the blue colour, which I changed to green; success is the colour of a successfully inserted section, or added comment (to the ao3 box), which is green in the original code; and danger is the red tone of both the Delete button as well as the one for closing the box
In the spirit of encouraging people to comment on fanfics while also making it easier to do so, I feel obliged to share a browser extension for ao3 that has quite literally revolutionized the comment game for me.
I present to you: the floating ao3 comment box!
From what I've seen, a big problem for many people is that once you reach the comments at the bottom of a fic, your memory of it miraculously disappears. Anything you wanted to say is stuck ten paragraphs ago, and you barely remember what you thought while reading. This fixes that!
I'll give a little explanation on the features and how it works, but if you want to skip all that, here's the link.
The extension is visible as a small blue box in the upper left corner.
(Side note: The green colouring is not from the extension, that's me.)
If you click on it, you open a comment box window at the bottom of your screen but not at the bottom of the fic. I opened my own fic for demonstrative purposes.
The website also gives explanations on how exactly it functions, but I'll summarize regardless.
insert selection -> if you highlight a sentence in the fic it will be added in italics to the comment box
add to comment box -> once you're done writing your comment, you click this button and the entire thing will automatically copied to the ao3 comment box
delete -> self explanatory
on mulitchapter fics, you will be given the option to either add the comment to just the current chapter or the entire fic
The best part? You can simply close the window the same way you opened it and your progress will automatically be saved. So you can open it, comment on a paragraph, and then close it and keep reading without having the box in your face.
Comments are what keep writers going, and as both a writer and a reader, I think it's such an easy way of showing support and enthusiasm.