combat

apps/web/src/app/layout/app-shell/app-shell.component.html

@@ -1,12 +1,14 @@
 <div class="app-shell">
   <app-top-bar [character]="worldStore.character()" />
 
-  <div class="app-shell__content">
+  <div class="app-shell__content" [class.app-shell__content--no-context]="inCombat()">
     <app-side-navigation />
     <main class="app-shell__main" aria-label="Spielinhalt">
       <router-outlet />
     </main>
-    <app-context-panel />
+    @if (!inCombat()) {
+      <app-context-panel />
+    }
   </div>
 
   <app-game-footer />

apps/web/src/app/layout/app-shell/app-shell.component.scss

@@ -16,6 +16,12 @@
   min-block-size: 0;
 }
 
+// Without the context rail the main column takes its place. The narrow layouts
+// below re-declare the template, so they keep working either way.
+.app-shell__content--no-context {
+  grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr);
+}
+
 .app-shell__main {
   min-inline-size: 0;
   min-block-size: 0;

apps/web/src/app/layout/app-shell/app-shell.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet, isActive } from '@angular/router';
 import { WorldStore } from '../../features/world/world.store';
 import { ContextPanelComponent } from '../context-panel/context-panel.component';
 import { GameFooterComponent } from '../game-footer/game-footer.component';
@@ -20,4 +20,8 @@ import { TopBarComponent } from '../top-bar/top-bar.component';
 })
 export class AppShellComponent {
   protected readonly worldStore = inject(WorldStore);
+
+  // The fight has its own log rail and wants the width, and the area info
+  // belongs to the world view anyway, so the rail is dropped during combat.
+  protected readonly inCombat = isActive('/combat', inject(Router));
 }