layout interactions

apps/web/src/app/features/world/location-interaction-panel/location-interaction-panel.component.html

@@ -7,17 +7,21 @@
     data-interaction-panel
   >
     @if (result) {
-      @if (result.img) {
-        <img
-          class="interaction-panel__portrait"
-          data-interaction-portrait
-          [src]="result.img"
-          [alt]="result.title"
-          (error)="($any($event.target).style.visibility = 'hidden')"
-        />
-      }
-      <h2 class="interaction-panel__title">{{ result.title }}</h2>
-      <p class="interaction-panel__text">{{ result.text }}</p>
+      <div class="interaction-panel__body">
+        @if (result.img) {
+          <img
+            class="interaction-panel__portrait"
+            data-interaction-portrait
+            [src]="result.img"
+            [alt]="result.title"
+            (error)="($any($event.target).style.visibility = 'hidden')"
+          />
+        }
+        <div class="interaction-panel__copy">
+          <h2 class="interaction-panel__title">{{ result.title }}</h2>
+          <p class="interaction-panel__text">{{ result.text }}</p>
+        </div>
+      </div>
     } @else {
       <h2 class="interaction-panel__title">Nothing to discover</h2>
       <p class="interaction-panel__text interaction-panel__text--error" role="alert">

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

@@ -22,7 +22,14 @@
   pointer-events: auto;
 }
 
+.interaction-panel__body {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ar-space-4);
+}
+
 .interaction-panel__portrait {
+  flex: 0 0 auto;
   inline-size: 5rem;
   block-size: 5rem;
   object-fit: contain;
@@ -31,6 +38,11 @@
   background: var(--ar-panel-muted);
 }
 
+.interaction-panel__copy {
+  display: grid;
+  gap: var(--ar-space-3);
+}
+
 .interaction-panel__title {
   margin: 0;
   color: var(--ar-gold);

apps/web/src/app/features/world/world-page.component.html

@@ -10,7 +10,7 @@
         preserveAspectRatio="none"
         aria-hidden="true"
       >
-        <path d="M 21 62 C 36 64, 51 50, 68 43" pathLength="1" />
+        <path d="M 21.71 37.61 C 26 39, 29 50, 32.70 51.55" pathLength="1" />
       </svg>
 
       <app-location-node