From 224b6e6f76bdaa376c5b802df8cdc4a57ca7f59b Mon Sep 17 00:00:00 2001
From: Botzy <bodim93@gmail.com>
Date: Tue, 18 Feb 2025 15:35:14 +0200
Subject: [PATCH] fix(Discover): improve styles to handle filters edge cases

---
 src/routes/Discover/Discover.js |  8 +++--
 src/routes/Discover/styles.less | 55 +++++++++++++++++++++------------
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index abcdfb205..db614a363 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -98,9 +98,11 @@ const Discover = ({ urlParams, queryParams }) => {
                                 onSelect={onSelect}
                             />
                         ))}
-                        <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
-                            <Icon className={styles['filter-icon']} name={'filters'} />
-                        </Button>
+                        <div className={styles['filter-container']}>
+                            <Button className={styles['filter-button']} title={'All filters'} onClick={openInputsModal}>
+                                <Icon className={styles['filter-icon']} name={'filters'} />
+                            </Button>
+                        </div>
                     </div>
                     {
                         discover.catalog !== null && !discover.catalog.installed ?
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index 50eee3c04..bf396c5ce 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -59,7 +59,9 @@
                         display: none;
 
                         &~.filter-container {
-                            display: flex;
+                            .filter-button {
+                                display: flex;
+                            }
                         }
                     }
 
@@ -69,20 +71,26 @@
                 }
 
                 .filter-container {
-                    flex: none;
-                    display: none;
-                    align-items: center;
-                    justify-content: center;
-                    width: 3rem;
-                    height: 3rem;
-                    border-radius: var(--border-radius);
-                    background-color: var(--overlay-color);
-
-                    .filter-icon {
+                    display: flex;
+                    flex: 1 0 5rem;
+                    justify-content: flex-end;
+                    .filter-button {
                         flex: none;
-                        width: 1.4rem;
-                        height: 1.4rem;
-                        color: var(--primary-foreground-color);
+                        display: none;
+                        align-items: center;
+                        justify-content: center;
+                        width: 3rem;
+                        height: 3rem;
+                        margin-left: 1.5rem;
+                        border-radius: var(--border-radius);
+                        background-color: var(--overlay-color);
+
+                        .filter-icon {
+                            flex: none;
+                            width: 1.4rem;
+                            height: 1.4rem;
+                            color: var(--primary-foreground-color);
+                        }
                     }
                 }
             }
@@ -219,9 +227,14 @@
 
             .select-input {
                 height: 3.5rem;
+                display: none;
 
-                &:not(:last-child) {
-                    margin-bottom: 1rem;
+                &:nth-child(n+4) {
+                    display: flex;
+
+                    &:not(:last-child) {
+                        margin-bottom: 1rem;
+                    }
                 }
 
                 .multiselect-menu-container {
@@ -362,7 +375,7 @@
                         &:nth-child(n+2) {
                             display: none;
 
-                            &~.filter-container {
+                            &~.filter-button {
                                 display: flex;
                             }
                         }
@@ -380,8 +393,12 @@
         .selectable-inputs-modal-container {
             .selectable-inputs-modal-content {
                 .select-input {
-                    &:first-child {
-                        display: none;
+                    display: none;
+                    &:nth-child(n+2) {
+                        display: flex;
+                        &:not(:last-child) {
+                            margin-bottom: 1rem;
+                        }
                     }
                 }
             }