Simple fix: scrolling bug and dark theme issue (follow this)

[devCKVargas]

This is a temporary fix, but I just wanna put this here for anyone. Also fixes: https://github.com/sindresorhus/caprine/pull/2155#issuecomment-2178244156, #2180, #2194, Does not fix: #2189

Instruction

1. From the menu bar click File > Caprine Settings > Advanced > Custom Styles
   • If you get an error message saying: This file does not have an app associated with it for performing this action follow this fix (windows)
2. Paste the code below, save it and close the notepad or whatever editor you use
3. Click your caprine window to focus and Ctrl + R to reload the current changes

Another layout: no spacing and rounded corners

Code to paste in your custom.css:

/* variable */
.__fb-dark-mode {
	--card-spacing: 0px;
}

/* you can remove this to keep the space on the right most card*/
.x1mj4gcd.x1mj4gcd {
	padding-right: var(--card-spacing);
}

/* Remove top space between the cards and the menu bar */
.x13dmulc.x13dmulc {
	margin-top: var(--card-spacing); 
}

/* Fix user account picture cutout or bad spacing*/
.xz9dl7a.xz9dl7a  {
	padding-bottom: 6px; 
}

• This removes the spaces from the top and right corner of the cards to prevent the weird scrolling behavior but not #2189.
• It also adds a space between the user's profile photo on the bottom left corner.
• This would not mess with any themes whatsoever, so you won't encounter https://github.com/sindresorhus/caprine/pull/2155#issuecomment-2178244156. Check these attached screenshots to see the before and after:

Before

After

[devCKVargas]

Fix of no app associated with .css

1. Open your run command window by pressing:

Windows Key + R

2. Paste and run this:

%appdata%\Caprine\custom.css

3. It should ask you what app should open the current file, select or find your text editor eg. notepad, code, sublime, etc..

[devCKVargas]

Code

/* variable */
.__fb-dark-mode {
	--card-spacing: 0px;
}

/* you can remove this to keep the space on the right most card*/
.x1mj4gcd.x1mj4gcd {
	padding-right: var(--card-spacing);
}

/* you can remove this to keep the space on the left most card (Inbox) */
.x1hys8i7.x1hys8i7 {
	padding-left: var(--card-spacing);
}

/* Removes the space from the left most corner */
.xdhzj85.xdhzj85 {
	margin-left: var(--card-spacing);
}

/* Remove top space between the cards and the menu bar */
.x13dmulc.x13dmulc {
	margin-top: var(--card-spacing); 
}

/* Fix user account picture cutout or bad spacing*/
.xz9dl7a.xz9dl7a  {
	padding-bottom: 6px; 
}

/* Removes the roundness of the corners */
.xzhurro.xzhurro, .xpyiiip.xpyiiip, .x88v6c3.x88v6c3, .x6gs93r.x6gs93r {
	border-radius: var(--card-spacing); 
}

Screenshot

[mquevill]

Thanks for these temporary workarounds. Hopefully they should no longer be needed as of newer versions (v2.60.3).