From 5fa65da58e1182fbb985fa4337047c9ec9ca0bac Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 18 Jul 2024 20:39:57 +0530
Subject: [PATCH] Use

---
 web/packages/new/photos/components/DevSettings.tsx | 4 ++--
 web/packages/new/photos/components/WhatsNew.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/packages/new/photos/components/DevSettings.tsx b/web/packages/new/photos/components/DevSettings.tsx
index 36afc370d8..9327436b09 100644
--- a/web/packages/new/photos/components/DevSettings.tsx
+++ b/web/packages/new/photos/components/DevSettings.tsx
@@ -1,3 +1,4 @@
+import { useIsMobileWidth } from "@/base/hooks";
 import { ensureOk } from "@/base/http";
 import { getKV, removeKV, setKV } from "@/base/kv";
 import log from "@/base/log";
@@ -11,7 +12,6 @@ import {
     InputAdornment,
     Link,
     TextField,
-    useMediaQuery,
     type ModalProps,
 } from "@mui/material";
 import { useFormik } from "formik";
@@ -33,7 +33,7 @@ interface DevSettingsProps {
  * See: [Note: Configuring custom server].
  */
 export const DevSettings: React.FC<DevSettingsProps> = ({ open, onClose }) => {
-    const fullScreen = useMediaQuery("(max-width: 428px)");
+    const fullScreen = useIsMobileWidth();
 
     const handleDialogClose: ModalProps["onClose"] = (_, reason: string) => {
         // Don't close on backdrop clicks.
diff --git a/web/packages/new/photos/components/WhatsNew.tsx b/web/packages/new/photos/components/WhatsNew.tsx
index 693c409e3d..a43e1b9bd6 100644
--- a/web/packages/new/photos/components/WhatsNew.tsx
+++ b/web/packages/new/photos/components/WhatsNew.tsx
@@ -1,4 +1,5 @@
 import { ensureElectron } from "@/base/electron";
+import { useIsMobileWidth } from "@/base/hooks";
 import { ut } from "@/base/i18n";
 import ArrowForward from "@mui/icons-material/ArrowForward";
 import {
@@ -10,7 +11,6 @@ import {
     DialogTitle,
     Typography,
     styled,
-    useMediaQuery,
 } from "@mui/material";
 import React, { useEffect } from "react";
 import { didShowWhatsNew } from "../services/changelog";
@@ -29,7 +29,7 @@ interface WhatsNewProps {
  * last time this dialog was shown.
  */
 export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
-    const fullScreen = useMediaQuery("(max-width: 428px)");
+    const fullScreen = useIsMobileWidth();
 
     useEffect(() => {
         if (open) void didShowWhatsNew(ensureElectron());