diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx index 44aa92621a3..22b70abff86 100644 --- a/src/components/Facility/CentralNursingStation.tsx +++ b/src/components/Facility/CentralNursingStation.tsx @@ -40,24 +40,23 @@ interface Props { } export default function CentralNursingStation({ facilityId }: Props) { - const breakpointValues = { + const perPageLimit = useBreakpoints({ default: 6, - largedisplay: 9, - fourK: 24, - }; - const PER_PAGE_LIMIT = useBreakpoints(breakpointValues); + "4xl": 9, + "4k": 24, + }); const { t } = useTranslation(); const [isFullscreen, setFullscreen] = useFullscreen(); const { qParams, updateQuery, removeFilter, updatePage } = useFilters({ - limit: PER_PAGE_LIMIT, + limit: perPageLimit, }); const query = useQuery(routes.listPatientAssetBeds, { pathParams: { facility_external_id: facilityId }, query: { ...qParams, page: qParams.page || 1, - limit: PER_PAGE_LIMIT, - offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT, + limit: perPageLimit, + offset: (qParams.page ? qParams.page - 1 : 0) * perPageLimit, asset_class: "HL7MONITOR", ordering: qParams.ordering || "bed__name", bed_is_occupied: @@ -91,7 +90,7 @@ export default function CentralNursingStation({ facilityId }: Props) { updatePage(page)} /> @@ -219,7 +218,7 @@ export default function CentralNursingStation({ facilityId }: Props) { {t("no_vitals_present")} ) : ( -
+
{data.map((props, i) => (
= { @@ -18,8 +10,8 @@ const BREAKPOINT_WIDTH: Record = { xl: 1280, "2xl": 1536, "3xl": 1920, - largedisplay: 2080, - fourK: 3000, + "4xl": 2560, + "4k": 3840, }; /** diff --git a/tailwind.config.js b/tailwind.config.js index 39d3664b543..bd48a2654ab 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,8 +22,8 @@ module.exports = { theme: { extend: { screens: { - largedisplay: "130rem", - fourk: "187rem", // rem is used insted of pixel + "4xl": "160rem", + "4k": "240rem", // rem is used insted of pixel }, fontFamily: { sans: ["Figtree", "sans-serif"],