Feat: Add responsive workspace shell

Frontend/src/components/shell/TopBar/NotificationsMenu.tsx

@@ -5,8 +5,9 @@ import styles from "./NotificationsMenu.module.scss";
 
 type NotificationsMenuProps = {
 	id: string;
-	menuRef: (element: HTMLDivElement) => void;
+	menuRef?: (element: HTMLDivElement) => void;
 	onSelect: () => void;
+	variant?: "popover" | "workspace";
 };
 
 export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element => {
@@ -14,9 +15,19 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
 	const earlierItems = notificationItems.filter((item) => !item.unread);
 	const hasNotifications = notificationItems.length > 0;
 	const isCaughtUp = unreadItems.length === 0 && hasNotifications;
+	const variant = props.variant ?? "popover";
 
 	return (
-		<div id={props.id} class={styles.menu} role="menu" aria-label="Notifications" ref={props.menuRef}>
+		<div
+			id={props.id}
+			classList={{
+				[styles.menu]: true,
+				[styles.menuWorkspace]: variant === "workspace",
+			}}
+			role="menu"
+			aria-label="Notifications"
+			ref={props.menuRef}
+		>
 			<div class={styles.header}>
 				<div class={styles.headerCopy}>
 					<strong class={styles.title}>Notifications</strong>