Fix Server Nav Margin on Mac-OS

[Ajit-Mehrotra]

Using M2 Macbook Air on MacOS Sonoma Version 14.1.1

Discord stable 319436 (45a1ed0)
Host 0.0.315 arm64
Build Override: N/A
macOS 14 (23.1.0)

Purpose

Margin issue where the server list is off-set from the rest of the application on macos (see top-left).

Process to debug & Issues Encountered

I tried looking at the DOM through developer tools. I just found a weird class called:

.platform-osx .wrapper_fea3ef {
margin-top: 32px
}

I narrowed it down to this class. However, after long search I was unable to find out the exact wrapper class anywhere in the code. As such, I was unable to figure out where/if/how the margin was calculated. Not sure if it's a class that's made by discord or something. It's something to look into, but something I'd need help with, if possible.

I did notice that when I unchecked the css class in developer tools, it went back to looking normal:

Solution

I edited os/_mac.scss to add one css class called .wrapper_fea3ef and set the margin-top to zero. It solved the issue, but might be something we'd want to look further into.

I also later (not shown) ended up adding another 10px in _root.scss just to make it look better.
--window-padding: 30px; /* Spacing around the Discord window | DEFAULT: 20px */

html.platform-osx {
	.macButtons-2MuSAC {
		position: absolute;
		top: var(--window-padding);
		left: var(--window-padding);
		background: rgb(0, 0, 0, var(--serverlist-brightness));
		width: 72px;
		border-top-left-radius: var(--window-roundness);
	}
	.wrapper-1Rf91z {
		margin-top: 30px;
	}
	.scroller-2TZvBN {
		padding-top: 15px;
	}
	
	// Added this line. Otherwise, the server list is pushed down and not in line.
	.wrapper_fea3ef {
		margin-top: 0px;
	}
}

Before

After

Thank you for all the hard work maintaining the code for FrostedGlass - it's valued and much appreciated!

[Ajit-Mehrotra]

Hi @Gibbu, I just wanted to check in on this pull request. Please let me know if there's anything else I can do or any changes you'd like me to make. Thanks!