fix(rick-and-morty): corrige tamanho do card em disponistivos moveis

Author: Danilo Otavio Lima Salve

src/app/pages/resources-api/rick-and-morty/characters-list/characters-card/character-card/character-card.component.html

@@ -1,5 +1,5 @@
 @if (item()) {
-  <po-widget class="po-xl-4 po-lg-6 po-md-12 po-sm-12 po-mb-2" [p-height]="250" appZoomOnHover>
+  <po-widget class="po-xl-4 po-lg-6 po-md-12 po-sm-12 po-mb-2" [p-height]="height()" appZoomOnHover>
     <div class="po-row">
       <div class="po-md-5 po-lg-5">
         @let image = item().image || 'assets/img/not-found-image.jpg';

src/app/pages/resources-api/rick-and-morty/characters-list/characters-card/character-card/character-card.component.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
+import { Component, inject, input, OnInit, signal } from '@angular/core';
 import { PoWidgetModule, PoImageModule, PoBadgeModule, PoTagModule } from '@po-ui/ng-components';
 
 import { Character } from './../../../shared/interfaces/character-rick-and-morty';
 import { ZoomOnHoverDirective } from '../../../../../../shared/directives/zoom-on-hover.directive';
+import { DeviceService } from '../../../../../../shared/services/device.service';
 
 const GENDER_COLOR = {
   Female: 'color-06',
@@ -24,8 +25,17 @@ const GENDER_VALUE = {
   imports: [CommonModule, PoBadgeModule, PoImageModule, PoTagModule, PoWidgetModule, ZoomOnHoverDirective],
   templateUrl: './character-card.component.html'
 })
-export class CharacterCardComponent {
+export class CharacterCardComponent implements OnInit {
   readonly item = input.required<Character>();
+  readonly height = signal<number>(250);
+
+  private readonly device = inject(DeviceService);
+
+  ngOnInit(): void {
+    if (this.device.isSmartPhone()) {
+      this.height.set(0);
+    }
+  }
 
   getGenderColor(gender: string): string {
     return GENDER_COLOR[gender as keyof typeof GENDER_COLOR];