feat: redesign reader page and disable canvas object caching for improved rendering

frontend/src/components/ui/ComposeCanvas.tsx

@@ -110,6 +110,8 @@ const initializeCanvas = (
     selection: !readOnly,
     preserveObjectStacking: true,
     allowTouchScrolling: true,
+    enableRetinaScaling: true,
+    objectCaching: false,
   });
 
   const wrapperEl = canvas.getElement().parentElement;
@@ -279,6 +281,7 @@ export const ComposeCanvas = forwardRef<
       textbox.lockScalingX = true;
       textbox.lockScalingY = true;
       textbox.lockRotation = true;
+      textbox.objectCaching = false;
 
       logicalSizeRef.current.height = measureLogicalContentHeight(
         canvas,

frontend/src/components/ui/LogModal.tsx

@@ -5,15 +5,17 @@ interface LogModalContent {
   message: string;
   log: string;
   onClose: () => void;
+  isOpen: boolean;
 }
 
 export const LogModal = ({
+  isOpen,
   message,
   log,
   onClose,
   status,
 }: LogModalContent) => {
-  return status === "RESET" ? (
+  return status === "RESET" || !isOpen ? (
     <div></div>
   ) : (
     <div className="modal modal-open modal-bottom sm:modal-middle bg-base-100/20 backdrop-blur-md z-100">