- Added external links to the bottom of the details panel

src/app/features/pokemon/pokemon-details/pokemon-details.component.ts

@@ -27,11 +27,12 @@ import { Observable } from 'rxjs';
 
       <div class="details-content">
         <img 
-          [src]="'/assets/images/pokemon/' + pokemon?.Image" 
+          [src]="pokemon?.Image" 
           [alt]="pokemon?.Name"
           class="pokemon-detail-image"
         >
 
+        <div class="scrollable-content">
           <div class="encounters-section">
             <h3>Encounters</h3>
             <ng-container *ngIf="encounters$ | async as encounters">
@@ -63,6 +64,16 @@ import { Observable } from 'rxjs';
             </ng-container>
           </div>
         </div>
+        <div class="external-links">
+          <a 
+            [href]="'https://bulbapedia.bulbagarden.net/wiki/' + pokemon?.Name + '_(Pokémon)'" 
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View on Bulbapedia
+          </a>
+        </div>
+      </div>
     </div>
   `,
   styles: [`
@@ -76,7 +87,7 @@ import { Observable } from 'rxjs';
       right: -340px;
       bottom: 0;
       transition: right 0.3s ease-in-out;
-      overflow-y: auto;
+      overflow: hidden;
       z-index: 1000;
     }
 
@@ -102,6 +113,7 @@ import { Observable } from 'rxjs';
       object-fit: contain;
       margin: 0 auto 20px;
       display: block;
+      flex-shrink: 0; /* Prevent image from shrinking */
     }
 
     .game-encounters {
@@ -163,6 +175,35 @@ import { Observable } from 'rxjs';
       font-size: 0.8em;
       color: #666;
     }
+
+    .details-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .scrollable-content {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .external-links {
+      position: sticky;
+      bottom: 0; /* Ensures it's always at the bottom of the panel */
+      padding: 15px;
+      border-top: 1px solid #eee;
+      background: white;
+      z-index: 10; /* Keeps it above the scrollable content */
+      
+      a {
+        color: #0645ad;
+        text-decoration: none;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   `]
 })
 export class PokemonDetailsComponent {