fix(web): keep the primary action bar on screen at every desktop width

The shell sizes itself with min-block-size everywhere, which is a floor,
not a ceiling. Against that indefinite ancestor, the location page's
minmax(0, 1fr) scene row fell back to content-based sizing instead of
being bounded, so the artwork could grow tall enough to push the action
bar off screen — confirmed visually at 1920 and 1024px widths, where the
bar was fully or partially clipped.

Gives the location page its own definite, viewport-bounded height
(reserve = stable top bar + footer + own padding) instead of touching the
shared shell, which other screens still size freely. The narrow/tablet
breakpoint had a second instance of the same class of bug: the sidebar's
auto-sized row claimed its full content height before the 1fr main row
saw any space at all, collapsing the action bar to 0px height. Swapping
which row is auto vs. 1fr — main first — fixes it the same way.

Also re-anchors the four Verbrannte Straße hotspots to painted detail in
the real artwork (cart, roadside grave, road, cracked stones) rather than
the composition-reference coordinates, and lets primary-action labels
stay on one line via clamp() instead of wrapping unevenly across widths.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/web/src/app/features/world/location-page/location-page.component.scss

@@ -1,6 +1,17 @@
+// The app shell sizes itself with `min-block-size` everywhere (a floor, not a
+// ceiling: apps/web/src/app/layout/app-shell/app-shell.component.scss), so
+// `block-size: 100%` here would resolve against an indefinite ancestor and
+// fall back to auto — a `minmax(0, 1fr)` row below would then track content
+// size instead of clamping, letting the artwork push the action bar off
+// screen. Giving this page its own definite, viewport-bounded height fixes
+// that without touching the shell, which other screens still size freely.
+// Reserve = top bar (~90px) + footer (~53px) + this page's own padding
+// (2 × var(--ar-space-5) = 48px), both stable across breakpoints.
+$app-shell-chrome-reserve: 191px;
+
 :host {
   display: block;
-  block-size: 100%;
+  block-size: calc(100dvh - #{$app-shell-chrome-reserve});
   min-block-size: 0;
 }
 
@@ -60,7 +71,11 @@
 
 .location-page__scene {
   position: relative;
-  min-block-size: 16rem;
+  inline-size: 100%;
+  // Fills the `minmax(0, 1fr)` row exactly — the row is a real, bounded size
+  // now that `.location-page` has a definite height, so the artwork needs no
+  // aspect-ratio of its own; `object-fit: cover` on the <img> does the crop.
+  min-block-size: 14rem;
   overflow: hidden;
   border: 1px solid var(--ar-border);
   border-radius: var(--ar-radius-md);
@@ -114,7 +129,9 @@
 
 .location-action__label {
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: 1rem;
+  font-size: clamp(0.85rem, 0.95vw, 1rem);
+  text-wrap: balance;
+  white-space: nowrap;
 }
 
 .location-action__hint {
@@ -161,6 +178,19 @@
 @media (width < 1100px) {
   .location-page {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr) auto;
+    // Main first, sized to its own natural minimum (scene floors at its
+    // min-block-size); sidebar gets whatever remains and scrolls internally.
+    // The reverse order starved main entirely — an `auto` track claims its
+    // full max-content height before a later `1fr` track sees any space, so
+    // the sidebar's tall content once pushed the action bar off (0px) while
+    // consuming the whole column itself.
+    grid-template-rows: auto minmax(8rem, 1fr);
+  }
+
+  .location-page__scene {
+    // Narrower columns give the artwork more natural height at 100% width
+    // (it has no aspect-ratio of its own below 1100px); floor it lower so
+    // the sidebar keeps a visible sliver instead of being squeezed to 0.
+    min-block-size: 10rem;
   }
 }