feat: inject ThemeService into App component and enhance responsive styles for navigation items

frontend/src/app/app.ts

@@ -7,6 +7,7 @@ import { BrandMark } from './components/brand-mark';
 import { SignInPage } from './components/sign-in-page/sign-in-page';
 import { WorkspaceNavigation } from './components/workspace-navigation/workspace-navigation';
 import { SessionService } from './services/session.service';
+import { ThemeService } from './services/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -24,6 +25,7 @@ import { SessionService } from './services/session.service';
 })
 export class App implements OnInit {
   readonly session = inject(SessionService);
+  readonly theme = inject(ThemeService);
   readonly userInitial = computed(() => this.session.username().charAt(0).toUpperCase());
 
   ngOnInit() {

frontend/src/app/components/workspace-navigation/workspace-navigation.css

@@ -69,28 +69,6 @@
 	background: var(--surface-accent);
 }
 
-@media (max-width: 959px) {
-	.navigation-item .mdc-button__label {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		min-width: 0;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.navigation-item span {
-		width: 100%;
-		min-width: 0;
-		overflow-wrap: break-word;
-		font-size: 0.62rem;
-		line-height: 1.05;
-		text-align: center;
-		white-space: normal;
-	}
-}
-
 @media (min-width: 960px) {
 	.app-navigation {
 		top: 0;
@@ -209,4 +187,4 @@
 		border-radius: 0;
 		font-size: 0.75rem;
 	}
-}
+}

frontend/src/styles.scss

@@ -272,6 +272,29 @@
 }
 
 @layer blocks {
+  @media (max-width: 959px) {
+    .navigation-item .mdc-button__label {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .navigation-item .mdc-button__label > span {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      overflow-wrap: break-word;
+      font-size: 0.62rem;
+      line-height: 1.05;
+      text-align: center;
+      white-space: normal;
+    }
+  }
+
   .busy-fieldset {
     min-width: 0;
     margin: 0;