Feat: Add responsive workspace shell

Frontend/src/components/shell/TopBar/NotificationsMenu.module.scss

@@ -7,11 +7,34 @@
 	gap: var(--space-3);
 	padding: var(--space-3);
 	border: 1px solid var(--color-border-strong);
-	border-radius: calc(var(--radius-lg) + 0.1rem);
+	border-radius: calc(var(--radius-lg) + (var(--space-1) / 2));
 	background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
-	box-shadow: 0 18px 36px color-mix(in srgb, black 16%, transparent);
-	backdrop-filter: blur(18px);
-	z-index: 30;
+	box-shadow: var(--shadow-strong);
+	backdrop-filter: blur(var(--blur-overlay));
+	z-index: var(--z-dropdown);
+}
+
+.menu.menuWorkspace {
+	position: static;
+	top: auto;
+	right: auto;
+	left: auto;
+	bottom: auto;
+	width: 100%;
+	max-width: none;
+	height: 100%;
+	min-height: 0;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	gap: var(--space-4);
+	padding: var(--space-4);
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	backdrop-filter: none;
+	z-index: auto;
+	overflow: hidden;
 }
 
 .header,
@@ -30,7 +53,7 @@
 .headerCopy {
 	min-width: 0;
 	display: grid;
-	gap: 0.08rem;
+	gap: calc(var(--space-1) / 2);
 }
 
 .title {
@@ -125,7 +148,7 @@
 
 .list {
 	display: grid;
-	gap: 0.3rem;
+	gap: var(--space-1);
 }
 
 .item {
@@ -181,7 +204,7 @@
 .itemBody {
 	min-width: 0;
 	display: grid;
-	gap: 0.12rem;
+	gap: calc(var(--space-1) / 2);
 }
 
 .itemTitle {
@@ -190,7 +213,7 @@
 }
 
 .itemTime {
-	padding-top: 0.05rem;
+	padding-top: calc(var(--space-1) / 4);
 	white-space: nowrap;
 	color: var(--color-text-subtle);
 }
@@ -202,26 +225,47 @@
 	flex-wrap: wrap;
 }
 
+.menu.menuWorkspace .listWrap {
+	min-height: 0;
+	max-height: none;
+	height: 100%;
+	padding-right: 0;
+	margin-right: 0;
+}
+
+.menu.menuWorkspace .header,
+.menu.menuWorkspace .footer {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 @include respond-down(mobile) {
-	.menu {
-		width: min(22rem, calc(100vw - (var(--space-3) * 2)));
+	.menu.menuWorkspace {
+		height: 100%;
+		min-height: 0;
+		padding: var(--space-5);
 	}
 
-	.item {
+	.menu.menuWorkspace .listWrap {
+		min-height: 0;
+		max-height: none;
+	}
+
+	.menu.menuWorkspace .item {
 		grid-template-columns: auto minmax(0, 1fr);
 	}
 
-	.itemTime {
+	.menu.menuWorkspace .itemTime {
 		grid-column: 2;
 		padding-top: 0;
 	}
 
-	.footer {
+	.menu.menuWorkspace .footer {
 		align-items: flex-start;
 		flex-direction: column;
 	}
 
-	.footerAction {
+	.menu.menuWorkspace .footerAction {
 		padding: var(--space-1) 0;
 	}
-	}
+}