diff --git a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
index 95b380e38..7a224c259 100644
--- a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
@@ -7,10 +7,8 @@ export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -19,7 +17,14 @@ export default function BillDetailEditcontainer() {
     xl: "90%",
     xxl: "90%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <Drawer
diff --git a/client/src/components/email-overlay/email-overlay.container.jsx b/client/src/components/email-overlay/email-overlay.container.jsx
index 0ae3b1779..bd152e582 100644
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/client/src/components/email-overlay/email-overlay.container.jsx
@@ -163,7 +163,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
     <Modal
       destroyOnHidden
       open={modalVisible}
-      maskClosable={false}
+      mask={{ closable: false }}
       width={"80%"}
       onOk={() => form.submit()}
       title={t("emails.labels.emailpreview")}
diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index cfe42fa67..716e93dff 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -58,10 +58,8 @@ const span = {
 export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTrail }) {
   const { scenarioNotificationsOn } = useSocket();
   const [updateJob] = useMutation(UPDATE_JOB);
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -70,7 +68,14 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
     xl: "75%",
     xxl: "75%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
diff --git a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
index 61db25a24..78ebecf27 100644
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -190,7 +190,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
         open={open}
         onCancel={handleModalClose}
         closable={!(earlyRoCreatedThisSession && !job.converted)}
-        maskClosable={!(earlyRoCreatedThisSession && !job.converted)}
+        mask={{ closable: !(earlyRoCreatedThisSession && !job.converted) }}
         title={t("jobs.actions.convert")}
         footer={null}
         width={700}
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index 2b28f3b9c..0ab5c37ef 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -214,7 +214,7 @@ export function JobsDetailHeaderActions({
       okText,
       cancelText,
       centered: true,
-      maskClosable: false,
+      mask: { closable: false },
       onCancel: () => {
         closeConfirmById(id);
         onCancel?.();
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index 063fabbd6..6830d44a4 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -28,9 +28,7 @@ const mapDispatchToProps = () => ({});
 export function JobsList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+  const screens = Grid.useBreakpoint();
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"]
@@ -332,7 +330,17 @@ export function JobsList({ bodyshop }) {
         rowKey="id"
         dataSource={jobs}
         scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%"
+          x: screens.xxl
+            ? scrollMapper.xxl
+            : screens.xl
+              ? scrollMapper.xl
+              : screens.lg
+                ? scrollMapper.lg
+                : screens.md
+                  ? scrollMapper.md
+                  : screens.sm
+                    ? scrollMapper.sm
+                    : scrollMapper.xs
         }}
         rowSelection={{
           onSelect: (record) => {
diff --git a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
index 4aba84804..de4d46a1f 100644
--- a/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
+++ b/client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
@@ -25,9 +25,7 @@ const mapStateToProps = createStructuredSelector({
 export function JobsReadyList({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
+  const screens = Grid.useBreakpoint();
 
   const readyStatuses = useMemo(() => {
     if (bodyshop.md_ro_statuses.ready_statuses) return bodyshop.md_ro_statuses.ready_statuses;
@@ -316,7 +314,17 @@ export function JobsReadyList({ bodyshop }) {
         rowKey="id"
         dataSource={jobs}
         scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%"
+          x: screens.xxl
+            ? scrollMapper.xxl
+            : screens.xl
+              ? scrollMapper.xl
+              : screens.lg
+                ? scrollMapper.lg
+                : screens.md
+                  ? scrollMapper.md
+                  : screens.sm
+                    ? scrollMapper.sm
+                    : scrollMapper.xs
         }}
         rowSelection={{
           onSelect: (record) => {
diff --git a/client/src/components/loading-spinner/loading-spinner.component.jsx b/client/src/components/loading-spinner/loading-spinner.component.jsx
index 9943b0d21..15eb3ecb2 100644
--- a/client/src/components/loading-spinner/loading-spinner.component.jsx
+++ b/client/src/components/loading-spinner/loading-spinner.component.jsx
@@ -11,9 +11,8 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
           position: "relative",
           alignContent: "center"
         }}
-        {...(props.children ? { tip: message ? message : null } : {})}
+        {...(props.children ? { description: message ? message : null } : {})}
         delay={200}
-        // TODO: Client Update - tip only works when there are actually children, and this component is used in a lot of places where there are no children
       >
         {props.children}
       </Spin>
diff --git a/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx b/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
index f522351f8..eb01780ef 100644
--- a/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
@@ -65,10 +65,8 @@ export function PartsOrderListTableDrawerComponent({
   setTaskUpsertContext,
   isPartsEntry
 }) {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -77,7 +75,14 @@ export function PartsOrderListTableDrawerComponent({
     xl: "75%",
     xxl: "65%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder", { job });
 
diff --git a/client/src/components/parts-queue-card/parts-queue-card.component.jsx b/client/src/components/parts-queue-card/parts-queue-card.component.jsx
index 65cbb62d1..6e02725c0 100644
--- a/client/src/components/parts-queue-card/parts-queue-card.component.jsx
+++ b/client/src/components/parts-queue-card/parts-queue-card.component.jsx
@@ -11,10 +11,8 @@ import PartsQueueJobLinesComponent from "./parts-queue-job-lines.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function PartsQueueDetailCard() {
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -23,7 +21,14 @@ export default function PartsQueueDetailCard() {
     xl: "75%",
     xxl: "60%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
index 04e1e34b6..2fd94f880 100644
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -208,7 +208,7 @@ export function ScheduleJobModalContainer({
       onCancel={() => toggleModalVisible()}
       onOk={() => form.submit()}
       width={"90%"}
-      maskClosable={false}
+      mask={{ closable: false }}
       destroyOnHidden
       okButtonProps={{
         loading: loading
diff --git a/client/src/pages/phonebook/phonebook.page.container.jsx b/client/src/pages/phonebook/phonebook.page.container.jsx
index 3a2fd2917..2445b8ba5 100644
--- a/client/src/pages/phonebook/phonebook.page.container.jsx
+++ b/client/src/pages/phonebook/phonebook.page.container.jsx
@@ -39,10 +39,8 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   const navigate = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -51,7 +49,15 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
     xl: "50%",
     xxl: "45%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  // Get the largest active breakpoint
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <RbacWrapper action="phonebook:view">
diff --git a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
index 3ba7cebf0..fe77d7f19 100644
--- a/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
+++ b/client/src/pages/shop-vendor/shop-vendor.page.component.jsx
@@ -8,10 +8,8 @@ export default function ShopVendorPageComponent() {
   const { selectedvendor } = Object.fromEntries(searchParams);
   const navigate = useNavigate();
 
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-
+  const screens = Grid.useBreakpoint();
+  
   const bpoints = {
     xs: "100%",
     sm: "100%",
@@ -20,7 +18,14 @@ export default function ShopVendorPageComponent() {
     xl: "50%",
     xxl: "45%"
   };
-  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
+  
+  let drawerPercentage = "100%";
+  if (screens.xxl) drawerPercentage = bpoints.xxl;
+  else if (screens.xl) drawerPercentage = bpoints.xl;
+  else if (screens.lg) drawerPercentage = bpoints.lg;
+  else if (screens.md) drawerPercentage = bpoints.md;
+  else if (screens.sm) drawerPercentage = bpoints.sm;
+  else if (screens.xs) drawerPercentage = bpoints.xs;
 
   return (
     <div>
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 271278df4..cd9023a11 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1416,6 +1416,7 @@
         "unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?"
       },
       "validation": {
+        "array": "Please select at least one option.",
         "dateRangeExceeded": "The date range has been exceeded.",
         "invalidemail": "Please enter a valid email.",
         "invalidphone": "Please enter a valid phone number.",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 349c1964a..809b4bc2e 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1416,6 +1416,7 @@
         "unsavedchangespopup": ""
       },
       "validation": {
+        "array": "Por favor seleccione al menos una opción.",
         "dateRangeExceeded": "",
         "invalidemail": "Por favor introduzca una dirección de correo electrónico válida.",
         "invalidphone": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 8e48b756f..0ba7ffbc4 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1416,6 +1416,7 @@
         "unsavedchangespopup": ""
       },
       "validation": {
+        "array": "Veuillez sélectionner au moins une option.",
         "dateRangeExceeded": "",
         "invalidemail": "S'il vous plaît entrer un email valide.",
         "invalidphone": "",