From cd19a2f3b5634ad2002fe0e49bd4a60ba3c2d09c Mon Sep 17 00:00:00 2001
From: Limbo2332 <vorobiovalosha@gmail.com>
Date: Wed, 6 Sep 2023 09:40:59 +0300
Subject: [PATCH 1/2] removed text about challenges when loading

---
 .../filtering-section/filtering-section.component.html     | 6 +++---
 .../filtering-section/filtering-section.component.sass     | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/modules/main/filtering-section/filtering-section.component.html b/frontend/src/app/modules/main/filtering-section/filtering-section.component.html
index e58518bcf..edd0f11d3 100644
--- a/frontend/src/app/modules/main/filtering-section/filtering-section.component.html
+++ b/frontend/src/app/modules/main/filtering-section/filtering-section.component.html
@@ -34,9 +34,9 @@
             (SelectedItemsChanged)="onTagsChange($event)"
             class="m-0-12px mb-28px"></app-dropdown-select>
     </div>
-    <div class="d-grid justify-content-center gap-2">
-        <div infinite-scroll (scrolled)="onScroll()" >
-            <div class="d-flex text-center text-white text-opacity-50 mt-3" *ngIf="!challenges.length">
+    <div class="challenges d-grid justify-content-center gap-2">
+        <div infinite-scroll (scrolled)="onScroll()">
+            <div class="d-flex text-center text-white text-opacity-50 mt-3" *ngIf="!challenges.length && !loading">
                 <div>
                     <h4>No available challenge</h4>
                     <p>Please select other variants</p>
diff --git a/frontend/src/app/modules/main/filtering-section/filtering-section.component.sass b/frontend/src/app/modules/main/filtering-section/filtering-section.component.sass
index 06b8e3573..07ff342d3 100644
--- a/frontend/src/app/modules/main/filtering-section/filtering-section.component.sass
+++ b/frontend/src/app/modules/main/filtering-section/filtering-section.component.sass
@@ -11,6 +11,9 @@
   max-width: 420px
   height: 480px
 
+.challenges
+  min-width: 500px
+
 .m-0-12px
   margin: 20px 20px 0
 
@@ -44,10 +47,14 @@
 
 :host ::ng-deep .title
     font-size: 14px
+
 @media (max-width: 992px)
   .filters
     max-width: 224px
 
+  .challenges
+    min-width: 440px
+
   .search-container
     width: 180px
 

From afba5b8c47d800833f4939db01ef58ac4ca264f4 Mon Sep 17 00:00:00 2001
From: Limbo2332 <vorobiovalosha@gmail.com>
Date: Wed, 6 Sep 2023 12:00:00 +0300
Subject: [PATCH 2/2] fixed challenges block to have gap

---
 .../filtering-section.component.html          | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/modules/main/filtering-section/filtering-section.component.html b/frontend/src/app/modules/main/filtering-section/filtering-section.component.html
index edd0f11d3..80a2a1f2f 100644
--- a/frontend/src/app/modules/main/filtering-section/filtering-section.component.html
+++ b/frontend/src/app/modules/main/filtering-section/filtering-section.component.html
@@ -34,21 +34,19 @@
             (SelectedItemsChanged)="onTagsChange($event)"
             class="m-0-12px mb-28px"></app-dropdown-select>
     </div>
-    <div class="challenges d-grid justify-content-center gap-2">
-        <div infinite-scroll (scrolled)="onScroll()">
-            <div class="d-flex text-center text-white text-opacity-50 mt-3" *ngIf="!challenges.length && !loading">
-                <div>
-                    <h4>No available challenge</h4>
-                    <p>Please select other variants</p>
-                </div>
+    <div class="challenges d-grid justify-content-center gap-2" infinite-scroll (scrolled)="onScroll()">
+        <div class="d-flex text-center text-white text-opacity-50 mt-3" *ngIf="!challenges.length && !loading">
+            <div>
+                <h4>No available challenge</h4>
+                <p>Please select other variants</p>
             </div>
+        </div>
 
-            <div *ngFor="let challenge of challenges">
-                <app-challenge class="challenge-block" [challenge]="challenge"></app-challenge>
-            </div>
-            <div *ngIf="loading">
-                <p class="text-center text-white text-opacity-50 mt-3">Loading...</p>
-            </div>
+        <div *ngFor="let challenge of challenges">
+            <app-challenge [challenge]="challenge"></app-challenge>
+        </div>
+        <div *ngIf="loading">
+            <p class="text-center text-white text-opacity-50 mt-3">Loading...</p>
         </div>
     </div>
 </div>