@c-rex/components 0.3.0-build.35 → 0.3.0-build.38

package/src/restriction-menu/taxonomy-restriction-command-menu.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { DomainEntityModel } from "@c-rex/interfaces";
+import { FC, ReactNode, useMemo, useState } from "react";
+import * as ComponentOptions from "../generated/client-components";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { RestrictionSelectionCommandMenu } from "./restriction-selection-command-menu";
+
+type GenericRequestData = {
+    items?: DomainEntityModel[];
+    pageInfo?: {
+        totalItemCount?: number;
+    };
+} | null | undefined;
+type GenericQueryParams = Record<string, unknown> & { Restrict?: string[]; PageSize?: number; Fields?: string[] };
+type GenericRequestProps = {
+    queryParams?: GenericQueryParams;
+    children: (props: { data?: GenericRequestData; isLoading?: boolean }) => ReactNode;
+};
+type RestrictionMenuFetchMode = "all" | "deferred";
+
+export type TaxonomyRestrictionCommandMenuProps = {
+    restrictField: string;
+    navigationMenuListClassName?: string;
+    itemsToRender?: number;
+    requestType: keyof typeof ComponentOptions;
+    onlyUsedEntries?: boolean;
+    enableHierarchy?: boolean;
+    fetchMode?: RestrictionMenuFetchMode;
+    showAllWhenEmpty?: boolean;
+    queryParams?: GenericQueryParams;
+    stripLabelPrefix?: string;
+};
+
+export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuProps> = ({
+    queryParams,
+    restrictField,
+    itemsToRender = 7,
+    requestType,
+    onlyUsedEntries = true,
+    enableHierarchy = false,
+    fetchMode = "deferred",
+    showAllWhenEmpty = true,
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
+    stripLabelPrefix,
+}) => {
+    const [loadAll, setLoadAll] = useState(false);
+    const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
+    const queryRestrict = queryParams?.Restrict || [];
+    const restrict = onlyUsedEntries ? ["hasInformationUnits=true", ...queryRestrict] : queryRestrict;
+    const explicitPageSize =
+        Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
+            ? Number(queryParams?.PageSize)
+            : undefined;
+    const resolvedPageSize = useMemo(() => {
+        if (explicitPageSize) return explicitPageSize;
+        if (fetchMode === "deferred" && !loadAll) return Math.max(itemsToRender, 1);
+        return 100;
+    }, [explicitPageSize, fetchMode, itemsToRender, loadAll]);
+    const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
+    const resolvedFields = useMemo(() => {
+        const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
+        if (!enableHierarchy) return baseFields;
+        const withParents = new Set(baseFields);
+        withParents.add("parents");
+        return Array.from(withParents);
+    }, [enableHierarchy, requestedFields]);
+
+    return (
+        <RequestComponent
+            queryParams={{
+                ...queryParams,
+                Fields: resolvedFields,
+                Links: true,
+                Sort: ["labels.value"],
+                PageSize: resolvedPageSize,
+                Restrict: restrict,
+            }}
+        >
+            {({ data, isLoading }) => {
+                if (isLoading) return (
+                    <Skeleton className="w-full h-9 rounded-full" />
+                );
+
+                if (!data) return null;
+
+                const itemCount = data.items?.length || 0;
+                const totalItemCount = data.pageInfo?.totalItemCount;
+                const hasMoreFromServer = typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
+                const hasMoreItems = hasMoreFromServer || (explicitPageSize ? false : (fetchMode === "deferred" && !loadAll && itemCount >= resolvedPageSize));
+
+                return (
+                    <RestrictionSelectionCommandMenu
+                        restrictField={restrictField}
+                        items={data.items || []}
+                        enableHierarchy={enableHierarchy}
+                        hasMoreItems={hasMoreItems}
+                        showAllWhenEmpty={showAllWhenEmpty}
+                        onRequestMore={() => {
+                            if (fetchMode === "deferred" && !explicitPageSize) {
+                                setLoadAll(true);
+                            }
+                        }}
+                        navigationMenuListClassName={navigationMenuListClassName}
+                        stripLabelPrefix={stripLabelPrefix}
+                    />
+                );
+            }}
+        </RequestComponent>
+    );
+};

package/src/restriction-menu/taxonomy-restriction-menu.tsx

@@ -5,6 +5,7 @@ import { FC, ReactNode, useMemo, useState } from "react";
 import * as ComponentOptions from "../generated/client-components";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { RestrictionSelectionMenu } from "./restriction-selection-menu";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 type GenericRequestData = {
     items?: DomainEntityModel[];
@@ -22,7 +23,11 @@ type RestrictionMenuFetchMode = "all" | "deferred";
 export type TaxonomyRestrictionMenuProps = {
     restrictField: string;
     navigationMenuListClassName?: string;
-    itemsToRender?: number;
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number;
+        [DEVICE_OPTIONS.TABLET]: number;
+        [DEVICE_OPTIONS.DESKTOP]: number;
+    };
     requestType: keyof typeof ComponentOptions;
     onlyUsedEntries?: boolean;
     enableHierarchy?: boolean;
@@ -31,16 +36,22 @@ export type TaxonomyRestrictionMenuProps = {
     queryParams?: GenericQueryParams;
 };
 
+const DEFAULT_ITEMS_BY_ROW = {
+    [DEVICE_OPTIONS.MOBILE]: 7,
+    [DEVICE_OPTIONS.TABLET]: 7,
+    [DEVICE_OPTIONS.DESKTOP]: 7,
+};
+
 export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
     queryParams,
     restrictField,
-    itemsToRender = 7,
+    itemsByRow = DEFAULT_ITEMS_BY_ROW,
     requestType,
     onlyUsedEntries = true,
     enableHierarchy = false,
     fetchMode = "deferred",
     showAllWhenEmpty = true,
-    navigationMenuListClassName = "items-center justify-between flex-row",
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
 }) => {
     const [loadAll, setLoadAll] = useState(false);
     const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
@@ -50,11 +61,12 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
         Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
             ? Number(queryParams?.PageSize)
             : undefined;
+    const maxItemsByRow = useMemo(() => Math.max(...Object.values(itemsByRow)), [itemsByRow]);
     const resolvedPageSize = useMemo(() => {
         if (explicitPageSize) return explicitPageSize;
-        if (fetchMode === "deferred" && !loadAll) return Math.max(itemsToRender, 1);
+        if (fetchMode === "deferred" && !loadAll) return Math.max(maxItemsByRow, 1);
         return 100;
-    }, [explicitPageSize, fetchMode, itemsToRender, loadAll]);
+    }, [explicitPageSize, fetchMode, maxItemsByRow, loadAll]);
     const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
     const resolvedFields = useMemo(() => {
         const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
@@ -77,13 +89,7 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
         >
             {({ data, isLoading }) => {
                 if (isLoading) return (
-                    <div className="flex justify-between">
-                        <Skeleton className="w-12 h-9 rounded-full" />
-                        {Array(itemsToRender).fill(0).map((_, index) => (
-                            <Skeleton key={`skeleton-${index}`} className="w-28 h-9 rounded-full" />
-                        ))}
-                        <Skeleton className="w-20 h-9 rounded-full" />
-                    </div>
+                    <Skeleton className="w-full h-9 rounded-full" />
                 );
 
                 if (!data) return null;
@@ -100,6 +106,7 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
                         enableHierarchy={enableHierarchy}
                         hasMoreItems={hasMoreItems}
                         showAllWhenEmpty={showAllWhenEmpty}
+                        itemsByRow={itemsByRow}
                         onRequestMore={() => {
                             if (fetchMode === "deferred" && !explicitPageSize) {
                                 setLoadAll(true);

package/src/results/filter-navbar.tsx

@@ -6,9 +6,11 @@ import { Button } from "@c-rex/ui/button";
 import { Funnel, X } from "lucide-react";
 import { Badge } from "@c-rex/ui/badge";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { OPERATOR_OPTIONS } from "@c-rex/constants";
+import { DEVICE_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants";
 import { Tags } from "@c-rex/interfaces";
+import { useBreakpoint } from "@c-rex/ui/hooks";
 import { applyFacetPropertyVisibility, FacetLabelOverrides, memoizeFilteredTags } from "./filter-sidebar/utils";
+import { useFilterSidebarState } from "./filter-sidebar/context";
 import { useSearchSettingsStore } from "../stores/search-settings-store";
 import { useRestrictionStore } from "../stores/restriction-store";
 import { useSearchNavigationStore } from "../stores/search-navigation-store";
@@ -38,6 +40,9 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
 }) => {
     const t = useTranslations()
     const locale = useLocale()
+    const device = useBreakpoint();
+    const isMobile = device !== null && device === DEVICE_OPTIONS.MOBILE
+    const { setIsMobileFiltersOpen } = useFilterSidebarState();
     const restrictionList = useRestrictionStore((state) => state.restrictionList);
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
     const [params, setParams] = useQueryStates({
@@ -59,8 +64,6 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
         history: 'push',
         shallow: false,
     });
-    const isMobile = false
-
 
     const filteredTags = useMemo(() => {
         const resolved = memoizeFilteredTags(tags, params.filter, params.packages, {
@@ -70,6 +73,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
         });
         return applyFacetPropertyVisibility(resolved, includeProperties, excludeProperties);
     }, [tags, params.filter, params.packages, locale, facetLabelOverrides, includeZeroHits, includeProperties, excludeProperties]);
+    const hasMobileFilters = Object.entries(filteredTags).length > 0;
 
     const humanizeMetadataKey = (key: string): string =>
         key
@@ -193,99 +197,100 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
             })
 
         return filters
-    }, [filteredTags, params]);
+    }, [filteredTags, params, resolveSectionLabelByKey, restrictionList, t]);
 
     if (filters == null || filters.length === 0) {
         return null;
     }
 
     return (
-        <div className="pb-4 flex justify-between">
-
-            <div className="flex flex-wrap gap-2">
+        <div className="pb-4 flex flex-wrap gap-1">
+            {hasMobileFilters && (
                 <Button
                     size="sm"
                     variant="secondary"
-                    //onClick={() => setOpen(true)}
-                    className="md:hidden"
+                    className="lg:hidden"
+                    aria-label={t("filter.filters")}
+                    onClick={() => setIsMobileFiltersOpen(true)}
                 >
                     <Funnel className="h-2" />
                 </Button>
-
-                {filters.length > 0 && (
-                    <>
-                        {filters.slice(0, 1).map((item) => (
-                            <Badge
-                                key={`${item.key}-${item?.value}`}
-                                variant="outline"
-                                className="h-8"
-                            >
-                                {item?.name ? item.name : item.key}: {item.value}
-
-                                {item.removable && (
-                                    <Button size="xs" variant="ghost" onClick={() => {
-                                        startSearchNavigation();
-                                        setParams({ [item.key]: item?.default })
-                                    }}>
-                                        <X className="h-2" />
-                                    </Button>
-                                )}
-                            </Badge>
-                        ))}
-
-
-                        {isMobile ? (
-                            <TooltipProvider>
-                                <Tooltip delayDuration={100}>
-                                    <TooltipTrigger>
-                                        <Badge
-                                            key={`grouped-filters`}
-                                            variant="outline"
-                                            className="h-8"
-                                        >
-                                            +{filters.length - 1} {t("filter.filters")}
-                                        </Badge>
-
-                                    </TooltipTrigger>
-
-                                    <TooltipContent>
-                                        {filters.slice(1).map((item) => {
-                                            const label = item?.name ? item.name : item.key
-                                            const returnString = `${label}: ${item.value}`;
-                                            return <div className="capitalize" key={returnString}>{returnString}</div>;
-                                        })}
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                        ) : (
-                            <>
-                                {filters.slice(1).map((item) => (
+            )}
+
+            {filters.length > 0 && (
+                <>
+                    {filters.slice(0, 1).map((item) => (
+                        <Badge
+                            key={`${item.key}-${item?.value}`}
+                            variant="outline"
+                            className="h-8"
+                        >
+                            {item?.name ? item.name : item.key}: {item.value}
+
+                            {item.removable && (
+                                <Button size="xs" variant="ghost" onClick={() => {
+                                    startSearchNavigation();
+                                    setParams({ [item.key]: item?.default })
+                                }}>
+                                    <X className="h-2" />
+                                </Button>
+                            )}
+                        </Badge>
+                    ))}
+
+
+                    {isMobile && filters.length > 1 ? (
+                        <TooltipProvider>
+                            <Tooltip delayDuration={100}>
+                                <TooltipTrigger>
                                     <Badge
-                                        key={`${item.key}-${item?.value}`}
+                                        key={`grouped-filters`}
                                         variant="outline"
                                         className="h-8"
                                     >
-                                        {item?.name ? item.name : item.key}: {item.value}
-
-                                        {item.removable && (
-                                            <Button size="xs" variant="ghost" onClick={() => {
-                                                startSearchNavigation();
-                                                setParams({ [item.key]: item?.default })
-                                            }}>
-                                                <X className="h-2" />
-                                            </Button>
-                                        )}
+                                        +{filters.length - 1} {t("filter.filters")}
                                     </Badge>
-                                ))}
-                            </>
-                        )}
-                    </>
-                )}
-            </div>
+
+                                </TooltipTrigger>
+
+                                <TooltipContent>
+                                    {filters.slice(1).map((item) => {
+                                        const label = item?.name ? item.name : item.key
+                                        const returnString = `${label}: ${item.value}`;
+                                        return <div className="capitalize" key={returnString}>{returnString}</div>;
+                                    })}
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    ) : (
+                        <>
+                            {filters.slice(1).map((item) => (
+                                <Badge
+                                    key={`${item.key}-${item?.value}`}
+                                    variant="outline"
+                                    className="h-8"
+                                >
+                                    {item?.name ? item.name : item.key}: {item.value}
+
+                                    {item.removable && (
+                                        <Button size="xs" variant="ghost" onClick={() => {
+                                            startSearchNavigation();
+                                            setParams({ [item.key]: item?.default })
+                                        }}>
+                                            <X className="h-2" />
+                                        </Button>
+                                    )}
+                                </Badge>
+                            ))}
+                        </>
+                    )}
+                </>
+            )}
 
             <Button
                 size="sm"
                 variant="secondary"
+                className="ml-auto"
                 onClick={() => {
                     startSearchNavigation();
                     setParams({ filter: null, packages: null })
@@ -294,6 +299,6 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
                 {t("reset")}
             </Button>
 
-        </div>
+        </div >
     );
 };

package/src/results/filter-sidebar/context.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FC, ReactNode, createContext, useContext, useMemo, useState } from "react";
+
+type FilterSidebarContextValue = {
+    isMobileFiltersOpen: boolean
+    setIsMobileFiltersOpen: (open: boolean) => void
+};
+
+const noop = () => undefined;
+
+const FilterSidebarContext = createContext<FilterSidebarContextValue>({
+    isMobileFiltersOpen: false,
+    setIsMobileFiltersOpen: noop,
+});
+
+export const FilterSidebarProvider: FC<{ children: ReactNode }> = ({ children }) => {
+    const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
+
+    const value = useMemo(() => ({
+        isMobileFiltersOpen,
+        setIsMobileFiltersOpen,
+    }), [isMobileFiltersOpen]);
+
+    return (
+        <FilterSidebarContext.Provider value={value}>
+            {children}
+        </FilterSidebarContext.Provider>
+    );
+};
+
+export const useFilterSidebarState = () => useContext(FilterSidebarContext);

package/src/results/filter-sidebar/index.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { FC, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { useLocale, useTranslations } from 'next-intl'
 import { Check, ChevronDown, ChevronRight } from "lucide-react"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@c-rex/ui/sheet";
 import {
     SidebarContent,
     SidebarGroup,
@@ -30,6 +32,8 @@ import {
 import { FilterItem, Tags } from "@c-rex/interfaces";
 import type { TaxonomyResult } from "@c-rex/services/read-models";
 import { useSearchNavigationStore } from "../../stores/search-navigation-store";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
+import { useFilterSidebarState } from "./context";
 
 
 export interface FilterSidebarProps {
@@ -42,9 +46,7 @@ export interface FilterSidebarProps {
     excludeProperties?: string[]
 }
 
-
-//TODO; check layout on mobile
-export const FilterSidebar: FC<FilterSidebarProps> = ({
+const FilterSidebar: FC<FilterSidebarProps> = ({
     tags,
     totalItemCount,
     facetLabelOverrides,
@@ -55,6 +57,9 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
 }) => {
     const t = useTranslations();
     const locale = useLocale();
+    const device = useBreakpoint();
+    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
+    const { isMobileFiltersOpen, setIsMobileFiltersOpen } = useFilterSidebarState();
     const [params, setParams] = useQueryStates({
         packages: parseAsString,
         filter: parseAsString,
@@ -379,8 +384,7 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
     };
 
     const content = (
-        <SidebarContent className="!gap-0" suppressHydrationWarning>
-
+        <SidebarContent className="!gap-0 capitalize" suppressHydrationWarning>
             {Object.entries(filteredTags).map(([key, value]) => {
                 const items = value as ResolvedFilterItem[];
                 const hasTaxonomy = Boolean(facetTaxonomies?.[key]);
@@ -403,7 +407,7 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
                             <Collapsible defaultOpen className="py-0 group/collapsible">
                                 <SidebarGroup className="!p-1">
                                     <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
-                                        <CollapsibleTrigger className="!h-8">
+                                        <CollapsibleTrigger className="!h-8 capitalize">
                                             {propertyLabel}
                                             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                         </CollapsibleTrigger>
@@ -517,36 +521,37 @@ export const FilterSidebar: FC<FilterSidebarProps> = ({
         </SidebarContent>
     )
 
-    /*
-    if (isMobile) {
-        return (
-            
-        <SheetContent
-        side="left"
-        className="!pt-6 !px-2 w-[400px] overflow-y-auto"
-        >
-        <SheetHeader className="justify-center items-end font-bold">
-        {t("filter.filters")}
-        <span className="text-xs text-muted-foreground leading-5">
-        {totalItemCount} {t("results.results")}
-        </span>
-        </SheetHeader>
-        {content}
-        </SheetContent>
-    )
-    }
-    */
     if (Object.entries(filteredTags).length === 0) return null;
 
     return (
-        <div className="w-60 lg:w-80 bg-sidebar rounded-md border pb-4">
-            <SidebarHeader className="justify-center items-end font-bold">
-                {t("filter.filters")}
-                <span className="text-xs text-muted-foreground leading-5">
-                    {totalItemCount} {t("results.results")}
-                </span>
-            </SidebarHeader>
-            {content}
-        </div>
+        <>
+            <Sheet open={isMobile && isMobileFiltersOpen} onOpenChange={setIsMobileFiltersOpen}>
+                <SheetContent
+                    side="left"
+                    className="w-[calc(100vw-2rem)] max-w-sm overflow-y-auto !px-2 !pt-6 lg:hidden"
+                >
+                    <SheetHeader className="justify-center items-end font-bold">
+                        <SheetTitle>{t("filter.filters")}</SheetTitle>
+                        <span className="text-xs text-muted-foreground leading-5">
+                            {totalItemCount} {t("results.results")}
+                        </span>
+                    </SheetHeader>
+                    {content}
+                </SheetContent>
+            </Sheet>
+
+            <div className="hidden w-60 rounded-md border bg-sidebar pb-4 lg:block lg:w-80">
+                <SidebarHeader className="justify-center items-end font-bold">
+                    {t("filter.filters")}
+                    <span className="text-xs text-muted-foreground leading-5">
+                        {totalItemCount} {t("results.results")}
+                    </span>
+                </SidebarHeader>
+                {content}
+            </div>
+        </>
     );
 };
+
+export { FilterSidebarProvider } from "./context";
+export { FilterSidebar };

package/src/results/generic/search-results-client.tsx

@@ -156,9 +156,7 @@ const SearchResultsBody = <TItem extends CommonItemsModel>({
                     />
 
                     <div className="flex-1 flex flex-col gap-4">
-                        <Pagination pageInfo={data.pageInfo} className="pt-0" />
                         <Empty />
-                        <Pagination pageInfo={data.pageInfo} />
                     </div>
                 </div>
             </div>
@@ -183,7 +181,10 @@ const SearchResultsBody = <TItem extends CommonItemsModel>({
                 />
 
                 <div className="flex-1 flex flex-col gap-4">
-                    <Pagination pageInfo={data.pageInfo} className="pt-0" />
+                    {Number(data.pageInfo.pageCount) > 1 && (
+                        <Pagination pageInfo={data.pageInfo} className="pt-0" />
+                    )}
+
                     <GenericTableResultList
                         items={data.items}
                         query={search}
@@ -217,7 +218,7 @@ export const GenericSearchResultsClient = <
     const t = useTranslations();
 
     return (
-        <div className="container">
+        <div className="flex-1 container">
             <div className="flex gap-6 py-6">
                 <div className="flex-1">
                     <SuggestionsComponent

package/src/results/generic/table-result-list.tsx

@@ -30,12 +30,12 @@ export const GenericTableResultList: FC<Props> = ({
 
     return (
         <div className="rounded-md border mb-6 last:border-b-0">
-            <div className="font-bold text-sm p-2 border-b items-center flex-wrap hidden md:flex">
-                <div className="flex-1 p-2">{t("title")}</div>
-                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("language")}</div>
-                <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("type")}</div>
+            <div className="font-bold text-sm px-2 py-4 gap-2 border-b items-center flex">
+                <div className="flex-1">{t("title")}</div>
+                <div className="w-28 flex justify-center">{t("type")}</div>
+                <div className="w-20 flex justify-center">{t("language")}</div>
                 {showFilesColumn &&
-                    <div className="w-1/2 md:w-1/5 p-2 flex justify-center">{t("files")}</div>
+                    <div className="w-8 flex justify-center">{t("files")}</div>
                 }
             </div>
 
@@ -63,31 +63,31 @@ export const GenericTableResultList: FC<Props> = ({
                 return (
                     <div
                         className={cn(
-                            "min-h-12 c-rex-result-item flex flex-wrap items-center border-b",
+                            "min-h-12 c-rex-result-item flex flex-wrap items-center border-b p-2 gap-2",
                             `c-rex-result-${itemType.toLowerCase()}`,
                         )}
                         key={item.shortId}
                     >
-                        <div className="flex-1 p-2">
+                        <div className="flex-1">
                             <Link href={link} className="hover:underline">{title}</Link>
                         </div>
 
-                        <div className="w-1/5 md:w-1/5 flex justify-center p-2">
-                            <span className="w-8 inline-block">
+                        <div className="w-28 flex justify-center">
+                            <Badge variant="secondary">
+                                {itemType}
+                            </Badge>
+                        </div>
+
+                        <div className="w-20 flex justify-center">
+                            <span className="w-8  inline-block">
                                 {countryCode.length > 0 && (
                                     <Flag countryCode={countryCode} />
                                 )}
                             </span>
                         </div>
 
-                        <div className="w-4/5 md:w-1/5 p-2 flex justify-center">
-                            <Badge>
-                                {itemType}
-                            </Badge>
-                        </div>
-
                         {showFilesColumn &&
-                            <div className="w-1/5 flex justify-center p-2">
+                            <div className="w-1/5 flex justify-center">
                                 <FileDownloadDropdown renditions={item.renditions} />
                             </div>
                         }