From 6c2c8d8ad38951f8594328c4e3960cf921211ebb Mon Sep 17 00:00:00 2001
From: KaleemNeslit <kaleem.neslit@gmail.com>
Date: Tue, 19 Nov 2024 20:27:35 +0500
Subject: [PATCH] hide the others filter in mobile

---
 .../HeaderWithFilters/HeaderWithFilters.scss  |  6 +-
 .../HeaderWithFilters/HeaderWithFilters.tsx   | 67 ++++++++++---------
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.scss b/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.scss
index 044243e481e..373bccace00 100644
--- a/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.scss
+++ b/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.scss
@@ -60,9 +60,9 @@
 
   @include smallInclusive {
     .filter-row {
-      flex-direction: column;
+      flex-direction: row;
       align-items: flex-start;
-      gap: 8px;
+      gap: 2px;
     }
   }
 
@@ -70,7 +70,7 @@
     margin-top: 0;
 
     .filter-section-right {
-      flex-direction: column;
+      flex-direction: row;
       align-items: flex-start;
     }
 
diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.tsx b/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.tsx
index 5823ed675b5..b83e358e274 100644
--- a/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.tsx
+++ b/packages/commonwealth/client/scripts/views/pages/discussions/HeaderWithFilters/HeaderWithFilters.tsx
@@ -296,7 +296,7 @@ export const HeaderWithFilters = ({
             // @ts-expect-error <StrictNullChecks/>
             <div className="filter-row" ref={filterRowRef}>
               <div className="filter-section">
-                <p className="filter-label">Sort</p>
+                {!isWindowExtraSmall && <p className="filter-label">Sort</p>}
                 <Select
                   selected={featuredFilter || ThreadFeaturedFilterTypes.Newest}
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -342,7 +342,7 @@ export const HeaderWithFilters = ({
               </div>
 
               <div className="filter-section filter-section-top">
-                <p className="filter-label">Filter</p>
+                {!isWindowExtraSmall && <p className="filter-label">Filter</p>}
                 <div className="filter-section filter-section-right">
                   {(topics || []).length > 0 && (
                     <Select
@@ -402,7 +402,7 @@ export const HeaderWithFilters = ({
                       }
                     />
                   )}
-                  {matchesContestFilterRoute ? (
+                  {!isWindowExtraSmall && matchesContestFilterRoute ? (
                     <Select
                       selected={urlParams.status || 'all'}
                       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -432,7 +432,8 @@ export const HeaderWithFilters = ({
                       dropdownPosition={rightFiltersDropdownPosition}
                     />
                   ) : (
-                    stages_enabled && (
+                    stages_enabled &&
+                    !isWindowExtraSmall && (
                       <Select
                         selected={selectedStage || 'All Stages'}
                         onSelect={(item) =>
@@ -466,34 +467,36 @@ export const HeaderWithFilters = ({
                       />
                     )
                   )}
-                  <Select
-                    selected={dateRange || ThreadTimelineFilterTypes.AllTime}
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onSelect={(item: any) => {
-                      onFilterSelect({
-                        filterKey: 'dateRange',
-                        filterVal: item.value as ThreadTimelineFilterTypes,
-                      });
-                    }}
-                    options={[
-                      {
-                        id: 1,
-                        value: ThreadTimelineFilterTypes.AllTime,
-                        label: 'All Time',
-                      },
-                      {
-                        id: 2,
-                        value: ThreadTimelineFilterTypes.ThisMonth,
-                        label: 'Month',
-                      },
-                      {
-                        id: 3,
-                        value: ThreadTimelineFilterTypes.ThisWeek,
-                        label: 'Week',
-                      },
-                    ]}
-                    dropdownPosition={rightFiltersDropdownPosition}
-                  />
+                  {!isWindowExtraSmall && (
+                    <Select
+                      selected={dateRange || ThreadTimelineFilterTypes.AllTime}
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      onSelect={(item: any) => {
+                        onFilterSelect({
+                          filterKey: 'dateRange',
+                          filterVal: item.value as ThreadTimelineFilterTypes,
+                        });
+                      }}
+                      options={[
+                        {
+                          id: 1,
+                          value: ThreadTimelineFilterTypes.AllTime,
+                          label: 'All Time',
+                        },
+                        {
+                          id: 2,
+                          value: ThreadTimelineFilterTypes.ThisMonth,
+                          label: 'Month',
+                        },
+                        {
+                          id: 3,
+                          value: ThreadTimelineFilterTypes.ThisWeek,
+                          label: 'Week',
+                        },
+                      ]}
+                      dropdownPosition={rightFiltersDropdownPosition}
+                    />
+                  )}
                 </div>
               </div>
             </div>