Persona mobile styling

ethereum · Sep 18, 2024 · 3a1983c · 3a1983c
1 parent 9080c6c
commit 3a1983c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 45 deletions.
diff --git a/src/components/ProductTable/PresetFilters.tsx b/src/components/ProductTable/PresetFilters.tsx
@@ -19,14 +19,16 @@ const PresetFilters = ({
 
   return (
     <div>
-      <h3 className="mb-3 text-xl font-bold">
+      <h3
+        className={`mb-3 text-xl font-bold ${showMobileSidebar ? "" : "px-4"}`}
+      >
         {t("table-what-are-you-looking-for")}
       </h3>
       <div
         className={`mb-2 ${
           showMobileSidebar
             ? "grid grid-cols-2 gap-2"
-            : "grid auto-cols-[200px] grid-flow-col gap-4 overflow-x-auto lg:auto-cols-fr"
+            : "grid auto-cols-[200px] grid-flow-col gap-4 overflow-x-auto px-4 lg:auto-cols-fr"
         }`}
       >
         {presets.map((preset, idx) => {

diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx
@@ -211,7 +211,7 @@ const ProductTable = ({
   }, [filters])
 
   return (
-    <div className="px-4">
+    <div>
       {presetFilters.length ? (
         <PresetFilters
           presets={presetFilters}
@@ -221,49 +221,53 @@ const ProductTable = ({
       ) : (
         <></>
       )}
-      <div className="flex flex-col gap-4 pb-6 pt-4 lg:flex-row lg:gap-6 2xl:px-0">
-        <div className="block lg:hidden">
-          <MobileFilters
-            filters={filters}
-            setFilters={setFilters}
-            presets={presetFilters}
-            activePresets={activePresets}
-            handleSelectPreset={handleSelectPreset}
-            dataCount={data.length}
-            activeFiltersCount={activeFiltersCount}
-            mobileFiltersOpen={mobileFiltersOpen}
-            setMobileFiltersOpen={setMobileFiltersOpen}
-            resetFilters={resetFilters}
-            mobileFiltersLabel={mobileFiltersLabel}
-          />
-        </div>
-        <div className="hidden lg:block">
-          <Filters
-            filters={filters}
-            setFilters={setFilters}
-            resetFilters={resetFilters}
-            activeFiltersCount={activeFiltersCount}
-          />
-        </div>
-        <div className="flex-1">
-          <div className="flex flex-row items-center justify-between px-2 py-1">
-            <Button
-              variant="ghost"
-              className="block p-0 lg:hidden"
-              onClick={() => setMobileFiltersOpen(true)}
-            >
-              <p className="text-md">{`${t("table-filters")} (${activeFiltersCount})`}</p>
-            </Button>
-            <p>
-              {t("table-showing")} (<b>{data.length}</b>)
-            </p>
+      <div className="px-4">
+        <div className="flex flex-col gap-4 pb-6 pt-4 lg:flex-row lg:gap-6 2xl:px-0">
+          <div className="block lg:hidden">
+            <MobileFilters
+              filters={filters}
+              setFilters={setFilters}
+              presets={presetFilters}
+              activePresets={activePresets}
+              handleSelectPreset={handleSelectPreset}
+              dataCount={data.length}
+              activeFiltersCount={activeFiltersCount}
+              mobileFiltersOpen={mobileFiltersOpen}
+              setMobileFiltersOpen={setMobileFiltersOpen}
+              resetFilters={resetFilters}
+              mobileFiltersLabel={mobileFiltersLabel}
+            />
+          </div>
+          <div className="hidden lg:block">
+            <Filters
+              filters={filters}
+              setFilters={setFilters}
+              resetFilters={resetFilters}
+              activeFiltersCount={activeFiltersCount}
+            />
+          </div>
+          <div className="flex-1">
+            <div className="flex flex-row items-center justify-between px-2 py-1">
+              <Button
+                variant="ghost"
+                className="block p-0 lg:hidden"
+                onClick={() => setMobileFiltersOpen(true)}
+              >
+                <p className="text-md">
+                  {`${t("table-filters")} (${activeFiltersCount})`}
+                </p>
+              </Button>
+              <p>
+                {t("table-showing")} (<b>{data.length}</b>)
+              </p>
+            </div>
+            <Table
+              columns={columns}
+              data={data}
+              subComponent={subComponent}
+              noResultsComponent={noResultsComponent}
+            />
           </div>
-          <Table
-            columns={columns}
-            data={data}
-            subComponent={subComponent}
-            noResultsComponent={noResultsComponent}
-          />
         </div>
       </div>
     </div>