fix(17): WR-05 IN-03 IN-01 resize-aware useIsPhone hook; OidcRedirect side-effect in effect

apps/pwa/src/components/SettingsSheet.tsx

@@ -26,6 +26,7 @@ import { X, Bell, AlertCircle, Loader2, LogOut } from 'lucide-react';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
 import { usePushSubscription } from '../hooks/usePushSubscription.js';
+import { useIsPhone } from '../hooks/useIsPhone.js';
 import { InstructionSheet } from './InstructionSheet.js';
 import { fetchMe, fetchAuthMode, fetchChangePassword, fetchLinkOidc, fetchLocalLogout } from '../api/client.js';
 
@@ -55,6 +56,8 @@ interface SettingsSheetProps {
 export function SettingsSheet({ isOpen, onClose }: SettingsSheetProps) {
   const { subscribe, permission, isSubscribed, setEnabled } = usePushSubscription();
   const navigate = useNavigate();
+  // WR-05: resize-aware so an iPad rotation across 767px reflows the sheet.
+  const phone = useIsPhone();
   const [isTogglingOn, setIsTogglingOn] = useState(false);
   const [instructionsOpen, setInstructionsOpen] = useState(false);
 
@@ -132,8 +135,6 @@ export function SettingsSheet({ isOpen, onClose }: SettingsSheetProps) {
 
   if (!isOpen) return null;
 
-  const phone = window.matchMedia('(max-width: 767px)').matches;
-
   // D-07: fire-and-best-effort logout — navigate to /login regardless of API success/failure
   const handleSignOut = async () => {
     try {
@@ -589,6 +590,7 @@ interface ChangePasswordSheetProps {
 }
 
 function ChangePasswordSheet({ isOpen, onClose }: ChangePasswordSheetProps) {
+  const phone = useIsPhone();
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -647,8 +649,6 @@ function ChangePasswordSheet({ isOpen, onClose }: ChangePasswordSheetProps) {
 
   if (!isOpen) return null;
 
-  const phone = window.matchMedia('(max-width: 767px)').matches;
-
   return (
     <>
       {/* Backdrop */}
@@ -921,6 +921,7 @@ interface LinkOidcSheetProps {
 }
 
 function LinkOidcSheet({ isOpen, onClose }: LinkOidcSheetProps) {
+  const phone = useIsPhone();
   const [error, setError] = useState<string | null>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
 
@@ -959,8 +960,6 @@ function LinkOidcSheet({ isOpen, onClose }: LinkOidcSheetProps) {
 
   if (!isOpen) return null;
 
-  const phone = window.matchMedia('(max-width: 767px)').matches;
-
   return (
     <>
       {/* Backdrop */}