Feat: Add responsive workspace shell

Frontend/src/components/shell/DepartmentSelector/DepartmentSelector.module.scss

@@ -7,7 +7,7 @@
   min-width: 0;
   padding: 0;
   display: inline-flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: flex-start;
   gap: var(--space-2);
   border: 0;
@@ -43,14 +43,25 @@
   box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
 }
 
+.copy {
+  min-width: 0;
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+
 .value {
   @include text-title;
   color: var(--color-text);
   font-weight: var(--font-weight-title);
+  line-height: 1;
 }
 
 .meta {
+  @include text-caption;
   color: var(--color-text-muted);
+  line-height: 1;
+  padding-left: var(--space-1);
 }
 
 .icon {
@@ -80,7 +91,7 @@
 
 .menuSection {
   display: grid;
-  gap: 0.15rem;
+  gap: calc(var(--space-1) / 2);
 }
 
 .menuSectionLabel {
@@ -171,14 +182,39 @@
 }
 
 .submenuIndicator {
-  width: 0.35rem;
-  height: 0.35rem;
+  width: calc(var(--space-1) + (var(--space-1) / 2));
+  height: calc(var(--space-1) + (var(--space-1) / 2));
   flex: 0 0 auto;
   border-radius: 999px;
   background: var(--color-accent-soft);
 }
 
 @include respond-down(mobile) {
+  .selector {
+    align-items: flex-end;
+    gap: var(--space-1);
+  }
+
+  .copy {
+    gap: var(--space-2);
+  }
+
+  .value {
+    line-height: 0.95;
+  }
+
+  .meta {
+    font-size: 0.68rem;
+    line-height: 1;
+    letter-spacing: 0.01em;
+    padding-bottom: calc(var(--space-1) / 2);
+  }
+
+  .icon {
+    align-self: flex-end;
+    margin-bottom: calc(var(--space-1) / 2);
+  }
+
   .menu {
     min-width: min(16rem, calc(100vw - (var(--space-4) * 2)));
   }

Frontend/src/components/shell/DepartmentSelector/DepartmentSelector.tsx

@@ -53,8 +53,10 @@ export const DepartmentSelector = (): JSX.Element => {
 				aria-expanded={isOpen()}
 				onClick={() => setIsOpen((open) => !open)}
 			>
-				<strong class={styles.value}>{selectedDepartment().name}</strong>
-				<span class={styles.meta}>{selectedTeamName()} team</span>
+				<span class={styles.copy}>
+					<strong class={styles.value}>{selectedDepartment().name}</strong>
+					<span class={styles.meta}>{selectedTeamName()}</span>
+				</span>
 
 				<ChevronDown classList={{ [styles.icon]: true, [styles.iconOpen]: isOpen() }} size={16} strokeWidth={2} />
 			</button>