feedback-vos 1.0.40 → 1.0.42

package/README.md

@@ -2,6 +2,12 @@
 
 A beautiful, customizable feedback widget for Next.js applications with built-in GitHub Issues integration.
 
+## Links
+
+- 📦 [NPM Package](https://www.npmjs.com/package/feedback-vos)
+- 🐙 [GitHub Repository](https://github.com/klaas-sysop/feedback-vos)
+- 🎨 [Live Demo](https://feedback.vossendesign.nl/)
+
 ## Features
 
 - 🎨 Modern and responsive design with dark/light theme support

package/dist/index.js

@@ -271,8 +271,21 @@ function ScreenshotEditor({
     const editedScreenshot = canvas.toDataURL("image/png");
     onSave(editedScreenshot);
   };
-  const maxWidth = 600;
-  const displayWidth = image ? Math.min(maxWidth, image.width) : maxWidth;
+  const [maxDisplayWidth, setMaxDisplayWidth] = react$1.useState(600);
+  react$1.useEffect(() => {
+    const updateMaxWidth = () => {
+      if (window.innerWidth >= 768) {
+        const availableWidth = window.innerWidth * 0.9 - 64;
+        setMaxDisplayWidth(Math.max(1200, Math.min(availableWidth, 1600)));
+      } else {
+        setMaxDisplayWidth(600);
+      }
+    };
+    updateMaxWidth();
+    window.addEventListener("resize", updateMaxWidth);
+    return () => window.removeEventListener("resize", updateMaxWidth);
+  }, []);
+  const displayWidth = image ? Math.min(maxDisplayWidth, image.width) : maxDisplayWidth;
   const displayHeight = image ? displayWidth / image.width * image.height : 400;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed inset-0 z-50 flex items-center justify-center ${themeClasses.overlay} p-2 md:p-4`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${themeClasses.bgSecondary} rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] md:max-h-[90vh] overflow-auto`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `sticky top-0 ${themeClasses.bgSecondary} border-b ${themeClasses.borderPrimary} p-2 md:p-4 flex items-center justify-between z-10 gap-2`, children: [
@@ -387,23 +400,30 @@ function ScreenshotButton({
   const themeClasses = getThemeClasses(theme);
   async function handleTakeScreenshot() {
     setIsTakenScreenShot(true);
-    const canvas = await html2canvas__default.default(document.documentElement, {
+    const canvas = await html2canvas__default.default(document.body, {
       width: window.innerWidth,
       height: window.innerHeight,
-      x: 0,
-      y: 0,
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
       scale: 1,
       // Use scale 1 for consistent sizing
       useCORS: true,
+      allowTaint: true,
+      // Allow external images for better rendering
+      backgroundColor: null,
+      // Preserve page background
+      removeContainer: false,
+      // Maintain proper container rendering
       logging: false,
       ignoreElements: (element) => {
         return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
       }
     });
-    const targetWidth = 1920;
-    const targetHeight = 1080;
+    const isMobile = window.innerWidth < 768;
+    const targetWidth = isMobile ? 1080 : 1920;
+    const targetHeight = isMobile ? 1920 : 1080;
     const normalizedCanvas = document.createElement("canvas");
     normalizedCanvas.width = targetWidth;
     normalizedCanvas.height = targetHeight;