Merge pull request #93 from kleros/fix/registries-grid-responsiveness

feat: improve registries grid responsiveness

Author: tractorss

web/src/pages/AllLists/RegistriesFetcher.tsx

@@ -11,7 +11,7 @@ import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { List_filters } from "consts/filters";
 import { sortRegistriesByIds } from "utils/sortRegistriesByIds";
 import { MAIN_CURATE_ADDRESS } from "src/consts";
-import { LG_BREAKPOINT } from "src/styles/breakpoints";
+import { LG_BREAKPOINT, SM_BREAKPOINT } from "src/styles/breakpoints";
 
 const RegistriesFetcher: React.FC = () => {
   const { page, order, filter } = useParams();
@@ -21,7 +21,7 @@ const RegistriesFetcher: React.FC = () => {
   const navigate = useNavigate();
   const { width } = useWindowSize();
   const location = useListRootPath();
-  const registriesPerPage = width > LG_BREAKPOINT ? 9 : 3;
+  const registriesPerPage = width > LG_BREAKPOINT ? 9 : width > SM_BREAKPOINT ? 6 : 3;
   const pageNumber = parseInt(page ?? "1", 10);
   const registrySkip = registriesPerPage * (pageNumber - 1);
 

web/src/styles/breakpoints.ts

@@ -1 +1,2 @@
 export const LG_BREAKPOINT = 900;
+export const SM_BREAKPOINT = 600;