Record UX improvements

frontend/src/features/fuel-logs/components/FuelLogEditDialog.tsx

@@ -35,15 +35,11 @@ export const FuelLogEditDialog: React.FC<FuelLogEditDialogProps> = ({
   const [isSaving, setIsSaving] = useState(false);
   const [hookError, setHookError] = useState<Error | null>(null);
 
-  // Defensive hook usage with error handling
-  let fuelGrades: any[] = [];
-  try {
-    const hookResult = useFuelGrades(formData.fuelType || log?.fuelType || FuelType.GASOLINE);
-    fuelGrades = hookResult.fuelGrades || [];
-  } catch (error) {
-    console.error('[FuelLogEditDialog] Hook error:', error);
-    setHookError(error as Error);
-  }
+  // Always call hooks at the top level to maintain order across renders
+  const { fuelGrades } = useFuelGrades(
+    (formData.fuelType as any) || (log?.fuelType as any) || FuelType.GASOLINE
+  );
+  const isSmallScreen = useMediaQuery('(max-width:600px)');
 
   // Reset form when log changes with defensive checks
   useEffect(() => {
@@ -111,9 +107,10 @@ export const FuelLogEditDialog: React.FC<FuelLogEditDialogProps> = ({
     onClose();
   };
 
-  // Early returns for error states
-  if (!log) return null;
+  // Early bailout if dialog not open or no log to edit
+  if (!open || !log) return null;
 
+  // Early returns for error states
   if (hookError) {
     return (
       <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
@@ -150,7 +147,7 @@ export const FuelLogEditDialog: React.FC<FuelLogEditDialogProps> = ({
       onClose={handleCancel}
       maxWidth="sm"
       fullWidth
-      fullScreen={useMediaQuery('(max-width:600px)')}
+      fullScreen={isSmallScreen}
       PaperProps={{
         sx: { maxHeight: '90vh' }
       }}
@@ -288,4 +285,4 @@ export const FuelLogEditDialog: React.FC<FuelLogEditDialogProps> = ({
       </DialogActions>
     </Dialog>
   );
-};
+};