diff --git a/packages/browser/src/components/UserMenu.tsx b/packages/browser/src/components/UserMenu.tsx
index 278f95930..12427055c 100644
--- a/packages/browser/src/components/UserMenu.tsx
+++ b/packages/browser/src/components/UserMenu.tsx
@@ -24,7 +24,7 @@ export default function UserMenu({ variant = 'sidebar' }: Props) {
 	return (
 		<AutoSizer style={{ height: '2.35rem', width: isSidebar ? '100%' : '2.35rem' }}>
 			{({ width }) => (
-				<Popover onOpenChange={setIsOpen} open={isOpen}>
+				<Popover onOpenChange={setIsOpen} open={isOpen} modal>
 					<Popover.Trigger asChild>
 						<Card
 							className={cn(
diff --git a/packages/browser/src/components/navigation/sidebar/SideBar.tsx b/packages/browser/src/components/navigation/sidebar/SideBar.tsx
index 420abf0e5..8a8aee817 100644
--- a/packages/browser/src/components/navigation/sidebar/SideBar.tsx
+++ b/packages/browser/src/components/navigation/sidebar/SideBar.tsx
@@ -42,10 +42,11 @@ export default function SideBar({ asChild, hidden }: Props) {
 	const { shouldUseGradient } = useTheme()
 
 	const isBrowser = platform === 'browser'
+	const isAtLeastMedium = useMediaMatch('(min-width: 768px)')
 	const isMobile = useMediaMatch('(max-width: 768px)')
 
 	const renderHeader = () => {
-		if (!isBrowser && !isMobile) {
+		if (!isBrowser && isAtLeastMedium) {
 			return (
 				<header className="flex w-full justify-between gap-1">
 					<UserMenu />
@@ -131,12 +132,12 @@ export default function SideBar({ asChild, hidden }: Props) {
 				{renderHeader()}
 
 				<div className="flex max-h-full grow flex-col gap-2 overflow-y-auto p-1 scrollbar-hide">
-					{!isMobile && isBrowser && <UserMenu />}
+					{isAtLeastMedium && isBrowser && <UserMenu />}
 					{sections}
 				</div>
 				<Spacer />
 
-				{!isMobile && <SideBarFooter />}
+				{isAtLeastMedium && <SideBarFooter />}
 			</>
 		)
 	}
diff --git a/packages/browser/src/components/navigation/sidebar/sections/library/LibraryOptionsMenu.tsx b/packages/browser/src/components/navigation/sidebar/sections/library/LibraryOptionsMenu.tsx
index eef96607e..d3fc620e4 100644
--- a/packages/browser/src/components/navigation/sidebar/sections/library/LibraryOptionsMenu.tsx
+++ b/packages/browser/src/components/navigation/sidebar/sections/library/LibraryOptionsMenu.tsx
@@ -62,6 +62,7 @@ export default function LibraryOptionsMenu({ library }: Props) {
 				libraryId={library.id}
 			/>
 			<DropdownMenu
+				modal={isMobile}
 				trigger={
 					<button className="p-1 text-foreground-muted text-opacity-50 outline-none hover:text-opacity-100 focus:ring-0 focus:ring-offset-0 data-[state=open]:text-opacity-100">
 						<MoreHorizontal className="h-4 w-4 shrink-0" />
diff --git a/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsHeader.tsx b/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsHeader.tsx
index c85bd2fe8..a27934956 100644
--- a/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsHeader.tsx
+++ b/packages/browser/src/scenes/library/tabs/settings/LibrarySettingsHeader.tsx
@@ -12,12 +12,13 @@ import { routeGroups } from './routes'
 export default function LibrarySettingsHeader() {
 	const location = useLocation()
 	const {
-		preferences: { primary_navigation_mode, layout_max_width_px },
+		preferences: { primary_navigation_mode, layout_max_width_px, enable_double_sidebar },
 	} = usePreferences()
 	const { t } = useLocaleContext()
 
 	const isMobile = useMediaMatch('(max-width: 768px)')
 	const preferTopBar = primary_navigation_mode === 'TOPBAR'
+	const displayingSideBar = !!enable_double_sidebar && !isMobile
 
 	/**
 	 * The active route based on the current location
@@ -52,9 +53,10 @@ export default function LibrarySettingsHeader() {
 
 	return (
 		<header
-			className={cn('flex w-full flex-col space-y-4 border-b border-b-edge p-4 md:pl-52', {
+			className={cn('flex w-full flex-col space-y-4 border-b border-b-edge p-4', {
 				// Note: We make the border transparent because the width constraint when using a top bar
 				'mx-auto border-b-transparent': preferTopBar && !!layout_max_width_px,
+				'pl-52': displayingSideBar,
 			})}
 			style={{
 				maxWidth: preferTopBar ? layout_max_width_px || undefined : undefined,
diff --git a/packages/components/src/dropdown/DropdownMenu.tsx b/packages/components/src/dropdown/DropdownMenu.tsx
index d04422d0d..5e052687a 100644
--- a/packages/components/src/dropdown/DropdownMenu.tsx
+++ b/packages/components/src/dropdown/DropdownMenu.tsx
@@ -47,6 +47,7 @@ type BaseProps = LabelOrTrigger &
 	ContentProps & {
 		contentWrapperClassName?: string
 		subContentWrapperClassName?: string
+		modal?: boolean
 	}
 export type DropdownMenuProps = GenericMenu<DropdownItem, DropdownItemGroup> & BaseProps
 
@@ -61,6 +62,7 @@ export function DropdownMenu({
 	contentWrapperClassName,
 	subContentWrapperClassName,
 	align,
+	modal = false,
 	...props
 }: DropdownMenuProps) {
 	const renderItems = (items: DropdownItem[]) => {
@@ -114,7 +116,7 @@ export function DropdownMenu({
 	}
 
 	return (
-		<Dropdown modal={false}>
+		<Dropdown modal={modal}>
 			<DropdownTrigger asChild>{renderTrigger()}</DropdownTrigger>
 
 			<DropdownContent className={cn('w-56', contentWrapperClassName)} align={align}>