From 6ae7b215dca551a60a7e00def5c953386525e85b Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Mon, 26 Aug 2024 14:17:00 +0300
Subject: [PATCH 1/4] chore: change height for prices component

---
 .../components/prices/price-list/price-list.component.less      | 2 +-
 .../dashboards/crypto/components/prices/prices.component.html   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.less
index 9b5c84f61..ff3880a4c 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.less
@@ -25,7 +25,7 @@
 }
 
 .list {
-    max-height: 22.5rem;
+    max-height: 15.5rem;
     overflow: scroll;
     background-color: var(--tui-background-base-alt);
     border-radius: 1rem;
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/prices.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/prices.component.html
index 94f093474..4abd11014 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/prices.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/prices/prices.component.html
@@ -2,6 +2,7 @@
     tuiAppearance="whiteblock"
     tuiCardLarge="normal"
     [style.height]="'100%'"
+    [style.min-height]="'420px'"
 >
     <header tuiHeader>
         <h2

From ddb8116f335ced2e3f7291eb12fa5c400315fb9d Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Mon, 26 Aug 2024 14:39:11 +0300
Subject: [PATCH 2/4] chore: change height and width for nft

---
 .../crypto/components/nft/nft-item/nft-item.component.less      | 2 +-
 .../src/dashboards/crypto/components/nft/nft.component.html     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-item/nft-item.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-item/nft-item.component.less
index dd0b132a3..63e613046 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-item/nft-item.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-item/nft-item.component.less
@@ -7,7 +7,7 @@
 .info {
     position: relative;
     display: flex;
-    padding: 1rem 0;
+    padding: 0.687rem 0;
     justify-content: space-between;
 }
 
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html
index a8abe3a7b..bad8a3add 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html
@@ -1,6 +1,7 @@
 <div
     tuiAppearance="whiteblock"
     tuiCardLarge="normal"
+    [style.min-width]="'37rem'"
 >
     <header tuiHeader>
         <h2

From 89b6d67b78d5af0bdad2a4e4d72ece65a0544253 Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Tue, 27 Aug 2024 12:01:37 +0300
Subject: [PATCH 3/4] chore: change nft layout

---
 .../crypto/components/nft/nft-list/nft-list.component.less   | 2 +-
 .../src/dashboards/crypto/components/nft/nft.component.html  | 2 +-
 .../src/dashboards/crypto/components/nft/nft.component.less  | 5 +++++
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.less

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
index 4ec0479ce..140149b73 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
@@ -15,7 +15,7 @@
 
 .info {
     display: flex;
-    overflow: hidden;
+    overflow: scroll;
     flex-direction: column;
     gap: 0.5rem;
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html
index bad8a3add..469f38817 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.html
@@ -1,7 +1,7 @@
 <div
     tuiAppearance="whiteblock"
     tuiCardLarge="normal"
-    [style.min-width]="'37rem'"
+    class="card"
 >
     <header tuiHeader>
         <h2
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.less
new file mode 100644
index 000000000..700c88902
--- /dev/null
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.less
@@ -0,0 +1,5 @@
+.card {
+    @media (min-width: 68rem) {
+        min-width: 37rem;
+    }
+}

From a3a84e252c8dac1be0758d18adc63e889cf3696f Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Wed, 28 Aug 2024 11:25:36 +0300
Subject: [PATCH 4/4] chore: change nft component

---
 .../nft/nft-list/nft-list.component.html      | 104 +++++++++---------
 .../nft/nft-list/nft-list.component.less      |   3 -
 .../nft/nft-list/nft-list.component.ts        |   3 +-
 .../crypto/components/nft/nft.component.ts    |   1 +
 4 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html
index ff71f17d6..99650e749 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html
@@ -1,60 +1,64 @@
 <div class="info">
     <h3 class="row-title tui-space_top-0 tui-space_bottom-0">Top NFTs</h3>
-    <div class="list">
-        @for (nft of nfts; track $index) {
-            <button
-                tuiCardLarge
-                tuiSurface="elevated"
-                class="card-nft"
-                (click)="updateItem($index)"
-            >
-                <tui-avatar
-                    class="logo-nft"
-                    [src]="nft.src"
-                />
-                <div
-                    class="text"
-                    [style.margin-top]="0"
+    <tui-scrollbar>
+        <div class="list">
+            @for (nft of nfts; track $index) {
+                <button
+                    tuiCardLarge
+                    tuiSurface="elevated"
+                    class="card-nft"
+                    (click)="updateItem($index)"
                 >
-                    <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
-                    <p
-                        tuiSubtitle
-                        class="tui-space_top-0 tui-space_bottom-0"
+                    <tui-avatar
+                        class="logo-nft"
+                        [src]="nft.src"
+                    />
+                    <div
+                        class="text"
+                        [style.margin-top]="0"
                     >
-                        {{ nft.price | tuiAmount: 'USD' | async }}
-                    </p>
-                </div>
-            </button>
-        }
-    </div>
+                        <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
+                        <p
+                            tuiSubtitle
+                            class="tui-space_top-0 tui-space_bottom-0"
+                        >
+                            {{ nft.price | tuiAmount: 'USD' | async }}
+                        </p>
+                    </div>
+                </button>
+            }
+        </div>
+    </tui-scrollbar>
 </div>
 <div class="info">
     <h3 class="row-title tui-space_top-0 tui-space_bottom-0">Recent bought NFTs</h3>
-    <div class="list">
-        @for (nft of nfts; track $index) {
-            <button
-                tuiCardLarge
-                tuiSurface="elevated"
-                class="card-nft"
-                (click)="updateItem($index)"
-            >
-                <tui-avatar
-                    class="logo-nft"
-                    [src]="nft.src"
-                />
-                <div
-                    class="text"
-                    [style.margin-top]="0"
+    <tui-scrollbar>
+        <div class="list">
+            @for (nft of nfts; track $index) {
+                <button
+                    tuiCardLarge
+                    tuiSurface="elevated"
+                    class="card-nft"
+                    (click)="updateItem($index)"
                 >
-                    <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
-                    <p
-                        tuiSubtitle
-                        class="tui-space_top-0 tui-space_bottom-0"
+                    <tui-avatar
+                        class="logo-nft"
+                        [src]="nft.src"
+                    />
+                    <div
+                        class="text"
+                        [style.margin-top]="0"
                     >
-                        {{ nft.price | tuiAmount: 'USD' | async }}
-                    </p>
-                </div>
-            </button>
-        }
-    </div>
+                        <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
+                        <p
+                            tuiSubtitle
+                            class="tui-space_top-0 tui-space_bottom-0"
+                        >
+                            {{ nft.price | tuiAmount: 'USD' | async }}
+                        </p>
+                    </div>
+                </button>
+            }
+        </div>
+    </tui-scrollbar>
 </div>
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
index 140149b73..3224e1932 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
@@ -9,13 +9,11 @@
     justify-content: space-around;
     padding: 1rem;
     gap: 0.5rem;
-    overflow: visible;
     max-width: 100%;
 }
 
 .info {
     display: flex;
-    overflow: scroll;
     flex-direction: column;
     gap: 0.5rem;
 }
@@ -27,7 +25,6 @@
 }
 
 .card-nft[tuiCardLarge][data-space] {
-    overflow: hidden;
     padding: 0;
     height: 9rem;
     width: 7.5rem;
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts
index 782fd3fa6..4a00a03d4 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts
@@ -7,7 +7,7 @@ import {
     Output,
 } from '@angular/core';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
-import {TuiAppearance, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiScrollbar, TuiSurface, TuiTitle} from '@taiga-ui/core';
 import {TuiAvatar} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
@@ -24,6 +24,7 @@ import {NftService} from '../nft.service';
         TuiAvatar,
         TuiCardLarge,
         TuiHeader,
+        TuiScrollbar,
         TuiSurface,
         TuiTitle,
     ],
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.ts b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.ts
index 4fe573e5c..55efd5a13 100644
--- a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.ts
@@ -20,6 +20,7 @@ import {NftListComponent} from './nft-list/nft-list.component';
         TuiTitle,
     ],
     templateUrl: './nft.component.html',
+    styleUrl: './nft.component.less',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NFTComponent {