fix: Filters overflow & Responsiveness issues (#566)

* fix(web): fix filters elements overflow & responsiveness * chore(web): update changeset * web(refactor): reduce block number/slot date range width in big screens
Blobscan · Sep 21, 2024 · e6d78aa · e6d78aa
1 parent bbf5111
commit e6d78aa
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 34 deletions.
diff --git a/.changeset/silent-taxis-admire.md b/.changeset/silent-taxis-admire.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Fixed overflow style and responsiveness issues in Filters.
diff --git a/apps/web/src/components/Dropdown/index.tsx b/apps/web/src/components/Dropdown/index.tsx
@@ -39,7 +39,7 @@ export const Dropdown: React.FC<DropdownProps> = function ({
         <ListboxButton
           className={`relative h-9 ${
             width ?? DEFAULT_WIDTH
-          } flex cursor-pointer items-center justify-between rounded-lg border border-transparent bg-controlBackground-light pl-2 pr-12 text-left text-sm shadow-md hover:border hover:border-controlBorderHighlight-light focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white active:border-controlBorderHighlight-dark ui-open:border-controlActive-light dark:bg-controlBackground-dark dark:hover:border-controlBorderHighlight-dark dark:ui-open:border-controlActive-dark`}
+          } flex cursor-pointer items-center justify-between rounded-lg border border-transparent bg-controlBackground-light pl-2 pr-8 text-left text-sm shadow-md hover:border hover:border-controlBorderHighlight-light focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white active:border-controlBorderHighlight-dark ui-open:border-controlActive-light dark:bg-controlBackground-dark dark:hover:border-controlBorderHighlight-dark dark:ui-open:border-controlActive-dark`}
         >
           <div className="truncate align-middle">
             {selected ? (

diff --git a/apps/web/src/components/Filters/RollupFilter.tsx b/apps/web/src/components/Filters/RollupFilter.tsx
@@ -42,7 +42,7 @@ export const RollupFilter: FC<RollupFilterProps> = function ({
       options={ROLLUP_OPTIONS}
       onChange={onChange}
       placeholder="Rollup"
-      width="w-full"
+      width="sm:w-[130px] w-full md:max-lg:w-full"
       clearable
     />
   );

diff --git a/apps/web/src/components/Filters/TimestampFilter.tsx b/apps/web/src/components/Filters/TimestampFilter.tsx
@@ -3,21 +3,25 @@ import cn from "classnames";
 import type { DatepickerType } from "react-tailwindcss-datepicker";
 import Datepicker from "react-tailwindcss-datepicker";
 
+import { useBreakpoint } from "~/hooks/useBreakpoint";
+
 type TimestampFilterProps = Pick<DatepickerType, "value" | "onChange">;
 
 export const TimestampFilter: FC<TimestampFilterProps> = function ({
   value,
   onChange,
 }) {
   const isValueSet = value?.startDate || value?.endDate;
+  const breakpoint = useBreakpoint();
+  const shouldShowPlaceholder = breakpoint !== "md";
 
   return (
     <Datepicker
       primaryColor="purple"
       value={value}
       onChange={onChange}
       inputClassName={cn(
-        "h-9 w-full pl-2 pr-12",
+        "h-9 w-full xl:w-[222px] md:max-lg:w-[44px] pl-2 pr-8",
         "text-left text-sm placeholder:text-sm",
         "cursor-pointer",
         "rounded-lg border border-transparent shadow-md",
@@ -38,7 +42,7 @@ export const TimestampFilter: FC<TimestampFilterProps> = function ({
         "relative",
         "[&>div>div]:dark:bg-controlBackground-dark [&>div>div]:border-controlBorder-light [&>div>div]:dark:border-transparent"
       )}
-      placeholder="Start date - End date"
+      placeholder={shouldShowPlaceholder ? "Start date - End date" : ""}
     />
   );
 };
diff --git a/apps/web/src/components/Filters/index.tsx b/apps/web/src/components/Filters/index.tsx
@@ -194,36 +194,38 @@ export const Filters: FC = function () {
   }, [queryParams]);
 
   return (
-    <Card>
+    <Card compact>
       <div className="flex flex-col justify-between gap-4 lg:flex-row lg:gap-0">
-        <div className="flex w-full flex-col items-center gap-2 md:flex-row">
-          <SortToggle
-            type={filters.sort}
-            onChange={(newSort) => {
-              dispatch({ type: "UPDATE", payload: { sort: newSort } });
-            }}
-          />
-          <div className="w-full md:w-40">
-            <RollupFilter
-              selected={filters.rollup}
-              onChange={(newRollup) =>
-                dispatch({ type: "UPDATE", payload: { rollup: newRollup } })
-              }
-            />
-          </div>
-          <div className="w-full md:w-64">
-            <TimestampFilter
-              value={filters.timestampRange}
-              onChange={(newTimestampRange) =>
-                dispatch({
-                  type: "UPDATE",
-                  payload: { timestampRange: newTimestampRange },
-                })
-              }
+        <div className="flex w-full flex-col items-center gap-2 md:flex-row lg:max-xl:gap-1">
+          <div className="flex w-full flex-row gap-2 xl:w-auto">
+            <SortToggle
+              type={filters.sort}
+              onChange={(newSort) => {
+                dispatch({ type: "UPDATE", payload: { sort: newSort } });
+              }}
             />
+            <div className="w-full sm:w-[130px] md:max-lg:w-full">
+              <RollupFilter
+                selected={filters.rollup}
+                onChange={(newRollup) =>
+                  dispatch({ type: "UPDATE", payload: { rollup: newRollup } })
+                }
+              />
+            </div>
+            <div className="w-full md:max-lg:w-[44px] lg:w-[222px]">
+              <TimestampFilter
+                value={filters.timestampRange}
+                onChange={(newTimestampRange) =>
+                  dispatch({
+                    type: "UPDATE",
+                    payload: { timestampRange: newTimestampRange },
+                  })
+                }
+              />
+            </div>
           </div>
           <div className="flex gap-2">
-            <div className="w-full md:w-52">
+            <div className="w-full md:w-52 lg:max-xl:w-[12rem]">
               <BlockNumberFilter
                 range={filters.blockNumberRange}
                 onChange={(newBlockNumberRange) =>
@@ -234,7 +236,7 @@ export const Filters: FC = function () {
                 }
               />
             </div>
-            <div className="w-full md:w-52">
+            <div className="w-full md:w-52 lg:max-xl:w-44">
               <SlotFilter
                 range={filters.slotRange}
                 onChange={(newSlotRange) =>
@@ -247,16 +249,19 @@ export const Filters: FC = function () {
             </div>
           </div>
         </div>
-        <div className="flex flex-col gap-2 md:flex-row">
+        <div className="flex flex-col gap-1 md:flex-row lg:ml-2">
           <Button
-            className="w-full lg:w-auto"
+            className="w-full lg:w-auto lg:px-3 xl:px-6"
             variant="outline"
             onClick={() => dispatch({ type: "CLEAR" })}
             disabled={disableClear}
           >
             Clear
           </Button>
-          <Button className="w-full lg:w-auto" onClick={handleFilter}>
+          <Button
+            className="w-full lg:w-auto lg:px-3 xl:px-6"
+            onClick={handleFilter}
+          >
             Filter
           </Button>
         </div>

diff --git a/apps/web/src/components/PaginatedTable/index.tsx b/apps/web/src/components/PaginatedTable/index.tsx
@@ -128,6 +128,7 @@ export const PaginatedTable: FC<PaginatedTableProps> = function ({
         </div>
       }
       emptyState={DEFAULT_TABLE_EMPTY_STATE}
+      compact
     >
       <div className="flex flex-col gap-6">
         <Table
-Original file line number
+Diff line change
@@ Expand Up @@
             </div>
           }
           emptyState={DEFAULT_TABLE_EMPTY_STATE}
+          compact
         >
           <div className="flex flex-col gap-6">
             <Table
@@ Expand Down @@