fix: button

fabiobrasileiroo · Nov 3, 2024 · 5e5d6ba · 5e5d6ba
1 parent 7959922
commit 5e5d6ba
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/app/modules/products/pages/nft/nft.component.html b/src/app/modules/products/pages/nft/nft.component.html
@@ -2,7 +2,7 @@
   <app-nft-header></app-nft-header>
 
   <div *ngFor="let category of productsByCategory | keyvalue" class="mb-8">
-    <h2 class="text-xl font-semibold text-primary-foreground mt-8">{{ category.key }}</h2>
+    <h2 class="text-xl font-semibold text-primary-foreground mt-8 mb-4">{{ category.key }}</h2>
 
     <div class="embla-wrapper">
       <!-- Botão de Navegação Esquerda -->
@@ -17,7 +17,7 @@ <h2 class="text-xl font-semibold text-primary-foreground mt-8">{{ category.key }
       <div class="embla" emblaCarousel [options]="options">
         <div class="embla__container">
           <div *ngFor="let product of category.value" class="embla__slide">
-            <div class="flex h-[420px] flex-col rounded-lg bg-background p-8 shadow-lg">
+            <div class="flex h-[420px] flex-col rounded-lg bg-background sm:p-8 p-4 shadow-lg">
               <div
                 [ngStyle]="{ 'background-image': 'url(' + (product.imageUrl || './assets/images/default-product.jpg') + ')' }"
                 class="h-[240px] cursor-pointer rounded-md bg-cover transition duration-150 ease-in-out hover:opacity-75"
@@ -37,7 +37,8 @@ <h3 class="text-md mt-6 font-semibold text-foreground">{{ product.name }}</h3>
                 </button>
                 <button
                   (click)="toggleSelection(product)"
-                  class="flex-none rounded-md bg-card px-4 py-2.5 text-xs font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
+                    class="flex-none rounded-md bg-card px-4 py-2.5 text-xs font-semibold text-muted-foreground hover:bg-muted hover:text-foreground whitespace-normal "
+
                 >
                   {{ selectedProducts.includes(product) ? 'Remover' : 'Adicionar ao Carrinho' }}
                 </button>

diff --git a/src/app/modules/products/pages/nft/produtos.component.css b/src/app/modules/products/pages/nft/produtos.component.css
@@ -44,3 +44,10 @@
 .embla__button--next {
   right: -20px;
 }
+
+button {
+  max-width: 100%;
+  white-space: normal;
+  word-wrap: break-word;
+  text-align: center;
+}