diff --git a/apps/api/src/database/seeds/local-location.content.ts b/apps/api/src/database/seeds/local-location.content.ts index 1a651e6..44881b4 100644 --- a/apps/api/src/database/seeds/local-location.content.ts +++ b/apps/api/src/database/seeds/local-location.content.ts @@ -31,6 +31,9 @@ export const BURNED_ROAD_LOCAL_CONTENT: LocalLocationContent = { localDescription: 'Ein alter Handelsweg, der durch Feuer und Krieg in Asche gelegt wurde. Verbrannte Karren, zerbrochene Waffen und verstummte Schreie säumen den Pfad in die Aschenfelder.', localArtworkPath: '/images/backgrounds/Aschestrasse.png', + // Anchored to painted detail in `Aschestrasse.png`: the burning horizon down + // the road, the standing gravestone on the left verge, the cracked stones in + // the near foreground, and the broken cart wheel on the right. localPointsOfInterest: [ { key: 'hunt-area', @@ -38,8 +41,8 @@ export const BURNED_ROAD_LOCAL_CONTENT: LocalLocationContent = { actionLabel: 'Jagd beginnen', type: 'HUNT', iconKey: 'hunt', - xPercent: 52, - yPercent: 44, + xPercent: 57, + yPercent: 33, enabled: true, }, { @@ -48,8 +51,8 @@ export const BURNED_ROAD_LOCAL_CONTENT: LocalLocationContent = { actionLabel: 'Sprechen', type: 'NPC', iconKey: 'speak', - xPercent: 20, - yPercent: 60, + xPercent: 17, + yPercent: 62, enabled: true, resultTitle: 'Verwundeter Kundschafter', resultText: @@ -61,8 +64,8 @@ export const BURNED_ROAD_LOCAL_CONTENT: LocalLocationContent = { actionLabel: 'Untersuchen', type: 'INVESTIGATE', iconKey: 'investigate', - xPercent: 32, - yPercent: 78, + xPercent: 40, + yPercent: 82, enabled: true, resultTitle: 'Verdächtige Spuren', resultText: @@ -74,8 +77,8 @@ export const BURNED_ROAD_LOCAL_CONTENT: LocalLocationContent = { actionLabel: 'Durchsuchen', type: 'SEARCH', iconKey: 'search', - xPercent: 80, - yPercent: 68, + xPercent: 86, + yPercent: 70, enabled: true, resultTitle: 'Verlassener Wagen', resultText: diff --git a/apps/web/src/app/features/world/location-page/location-page.component.scss b/apps/web/src/app/features/world/location-page/location-page.component.scss index d009899..7d690a0 100644 --- a/apps/web/src/app/features/world/location-page/location-page.component.scss +++ b/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 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; } }