Use

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.

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());