- Fixing some css issues

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

@@ -4,20 +4,22 @@ import { PokemonFamilyEntry } from '../../../core/models/plan.model';
 import { Pokemon } from '../../../core/models/pokemon.model';
 import { PokemonService } from '../../../core/services/pokemon.service';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatTabsModule } from '@angular/material/tabs';
+
 
 @Component({
 selector: 'app-plan-pokemon-details',
 standalone: true,
 imports: [
     CommonModule,
-    MatChipsModule
+    MatChipsModule,
+    MatTabsModule
 ],
 template: `
-<div class="targets-grid" *ngIf="hasTargets">
+<mat-tab-group>
-    <ng-container *ngIf="evolve_to.length > 0">
+  <!-- Evolution Targets Tab -->
-        <div class="target-section">
+  <mat-tab label="Evolution Targets" *ngIf="evolve_to.length > 0">
-        <h4>Evolution Targets</h4>
+    <div class="scrollable-content">
-        <div class="target-cards">
       <div 
         *ngFor="let target of evolve_to" 
         class="target-card"
@@ -31,21 +33,19 @@ template: `
           [class.grayscale]="isTargetCompleted(target.PFIC)"
         >
         <div class="target-details">
-                <div class="target-name">
+          <span class="target-name">
             {{ target.Name }}
             <span *ngIf="target.Form">({{ target.Form }})</span>
-                </div>
+          </span>
           <span *ngIf="target.EvolutionMethod">{{target?.EvolutionMethod}}</span>
         </div>
       </div>
     </div>
-        </div>
+  </mat-tab>
-    </ng-container>
 
-    <ng-container *ngIf="pokemon_family.breed_for.length > 0">
+  <!-- Breeding Targets Tab -->
-        <div class="target-section">
+  <mat-tab label="Breeding Targets" *ngIf="breed_for.length > 0">
-        <h4>Breeding Targets</h4>
+    <div class="scrollable-content">
-        <div class="target-cards">
       <div 
         *ngFor="let target of breed_for" 
         class="target-card"
@@ -59,72 +59,70 @@ template: `
           [class.grayscale]="isTargetCompleted(target.PFIC)"
         >
         <div class="target-details">
-                <div class="target-name">
+          <span class="target-name">
             {{ target.Name }}
             <span *ngIf="target.Form">({{ target.Form }})</span>
-                </div>
+          </span>
           <mat-chip-listbox>
             <mat-chip>Breed</mat-chip>
           </mat-chip-listbox>
         </div>
       </div>
     </div>
-        </div>
+  </mat-tab>
-    </ng-container>
+</mat-tab-group>
-</div>
 `,
 styles: [`
-    .targets-grid {
+.scrollable-content {
-      padding: 16px 8px;
+  max-height: calc(100vh - 400px); /* Adjust as necessary for the available space */
-      display: flex;
+  overflow-y: auto;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .target-cards {
   display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(250px, auto));
   gap: 16px;
-    }
+  padding: 16px 8px; /* Adjust padding to your liking */
+}
 
-    .target-card {
+.target-card {
   display: flex;
-      align-items: center;
+  //flex-direction: column; /* Stack image and details vertically */
+  //align-items: flex-start;
   gap: 12px;
   padding: 8px;
   border: 1px solid #eee;
   border-radius: 8px;
   transition: background-color 0.3s ease;
+  //width: 100%; /* Keep cards from growing too wide */
+}
 
-      &:hover {
+.target-card:hover {
   background-color: #f5f5f5;
-      }
+}
 
-      &.completed {
+.target-card.completed {
   background-color: #f0f0f0;
-      }
+}
-    }
 
-    .target-image {
+.target-image {
   width: 64px;
   height: 64px;
   object-fit: contain;
-    }
+}
 
-    .target-details {
+.target-details {
   display: flex;
   flex-direction: column;
   gap: 8px;
-    }
+}
 
-    .target-name {
+.target-name {
   font-weight: 500;
+}
 
-      span {
+.target-name span {
   color: #666;
   font-size: 0.9em;
-      }
+}
-    }
+
 `]
 })
 export class PlanPokemonDetailsComponent {

src/app/features/plan/planV2.component.ts

@@ -76,7 +76,7 @@ import { AuthService } from '../../core/services/auth.service';
     }
 
     .games-section {
-      width: 11%;
+      width: 220px;
       padding: 20px;
       overflow-y: auto;
       background: #f5f5f5;