feedback-vos 1.0.28 → 1.0.30

package/dist/index.js

@@ -75,19 +75,19 @@ function FeedbackTypeStep({ onFeedbackTypeChanged, language }) {
   const feedbackTypes = getFeedbackTypes(language);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between w-full gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl leading-6", children: t.form.header }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg md:text-xl leading-6", children: t.form.header }),
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex py-8 gap-2 w-full", children: Object.entries(feedbackTypes).map(([key, value]) => {
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex py-6 md:py-8 gap-2 md:gap-2 w-full justify-center md:justify-start flex-wrap", children: Object.entries(feedbackTypes).map(([key, value]) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
-          className: "bg-zinc-800 rounded py-5 w-24 flex1 flex flex-col items-center gap-2 border-2 border-transparent hover:border-brand-500 focus:border-brand-500 focus:outline-none",
+          className: "bg-zinc-800 rounded py-4 md:py-5 flex-1 min-w-[80px] md:w-24 flex flex-col items-center gap-2 border-2 border-transparent hover:border-brand-500 focus:border-brand-500 focus:outline-none transition-colors",
           type: "button",
           onClick: () => onFeedbackTypeChanged(key),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: value.image.source, alt: value.image.alt }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: value.title })
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: value.image.source, alt: value.image.alt, className: "w-5 h-5 md:w-6 md:h-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm text-center", children: value.title })
           ]
         },
         key
@@ -98,33 +98,338 @@ function FeedbackTypeStep({ onFeedbackTypeChanged, language }) {
 function Loading() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 flex items-center justify-center overflow-hidden ", children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.CircleNotch, { weight: "bold", className: "w-4 h-4 animate-spin" }) });
 }
+function ScreenshotEditor({
+  screenshot,
+  onSave,
+  onCancel,
+  language
+}) {
+  const canvasRef = react$1.useRef(null);
+  const [isDrawing, setIsDrawing] = react$1.useState(false);
+  const [color, setColor] = react$1.useState("#ef4444");
+  const [brushSize, setBrushSize] = react$1.useState(3);
+  const [image, setImage] = react$1.useState(null);
+  const t = {
+    en: {
+      save: "Save",
+      cancel: "Cancel",
+      clear: "Clear",
+      undo: "Undo"
+    },
+    nl: {
+      save: "Opslaan",
+      cancel: "Annuleren",
+      clear: "Wissen",
+      undo: "Ongedaan maken"
+    }
+  }[language];
+  const colors = [
+    "#ef4444",
+    // red-500
+    "#f59e0b",
+    // amber-500
+    "#eab308",
+    // yellow-500
+    "#22c55e",
+    // green-500
+    "#3b82f6",
+    // blue-500
+    "#8b5cf6",
+    // violet-500
+    "#ec4899",
+    // pink-500
+    "#ffffff",
+    // white
+    "#000000"
+    // black
+  ];
+  react$1.useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      setImage(img);
+      if (canvasRef.current) {
+        const canvas = canvasRef.current;
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(img, 0, 0);
+        }
+      }
+    };
+    img.src = screenshot;
+  }, [screenshot]);
+  const getCoordinates = react$1.useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    if ("touches" in e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      return {
+        x: (touch.clientX - rect.left) * scaleX,
+        y: (touch.clientY - rect.top) * scaleY
+      };
+    } else {
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY
+      };
+    }
+  }, []);
+  const startDrawing = react$1.useCallback((e) => {
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = getCoordinates(e);
+    setIsDrawing(true);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = brushSize;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+  }, [color, brushSize, getCoordinates]);
+  const draw = react$1.useCallback((e) => {
+    if (!isDrawing) return;
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = getCoordinates(e);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  }, [isDrawing, getCoordinates]);
+  const stopDrawing = react$1.useCallback(() => {
+    setIsDrawing(false);
+  }, []);
+  const clearCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !image) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0);
+  };
+  const undo = () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !image) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0);
+  };
+  const handleSave = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const editedScreenshot = canvas.toDataURL("image/png");
+    onSave(editedScreenshot);
+  };
+  const maxWidth = 600;
+  const displayWidth = image ? Math.min(maxWidth, image.width) : maxWidth;
+  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 bg-black/80 p-2 md:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-800 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 bg-zinc-800 border-b border-zinc-700 p-2 md:p-4 flex items-center justify-between z-10 gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base md:text-lg font-semibold text-zinc-100 truncate", children: language === "nl" ? "Teken op screenshot" : "Draw on screenshot" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 md:gap-2 flex-shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: undo,
+            className: "p-1.5 md:p-2 bg-zinc-700 hover:bg-zinc-600 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            title: t.undo,
+            children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ArrowCounterClockwise, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: clearCanvas,
+            className: "p-1.5 md:p-2 bg-zinc-700 hover:bg-zinc-600 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            title: t.clear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Trash, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "p-1.5 md:p-2 bg-zinc-700 hover:bg-zinc-600 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            title: t.cancel,
+            children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSave,
+            className: "p-1.5 md:p-2 bg-brand-500 hover:bg-brand-400 rounded-md text-zinc-100 transition-colors touch-manipulation",
+            title: t.save,
+            children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Check, { weight: "bold", className: "w-4 h-4 md:w-5 md:h-5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 md:p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 md:mb-4 flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs md:text-sm text-zinc-300 whitespace-nowrap", children: language === "nl" ? "Kleur:" : "Color:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 md:gap-2 flex-wrap", children: colors.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setColor(c),
+            className: `w-7 h-7 md:w-8 md:h-8 rounded-full border-2 transition-all touch-manipulation ${color === c ? "border-zinc-100 scale-110" : "border-zinc-600 hover:border-zinc-500"}`,
+            style: { backgroundColor: c },
+            title: c
+          },
+          c
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 md:mb-4 flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs md:text-sm text-zinc-300 whitespace-nowrap", children: language === "nl" ? "Grootte:" : "Size:" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full md:w-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: "1",
+              max: "10",
+              value: brushSize,
+              onChange: (e) => setBrushSize(Number(e.target.value)),
+              className: "flex-1 md:flex-none md:max-w-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm text-zinc-400 w-6 md:w-8 text-right", children: brushSize })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center bg-zinc-900 rounded-lg p-2 md:p-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          onMouseDown: startDrawing,
+          onMouseMove: draw,
+          onMouseUp: stopDrawing,
+          onMouseLeave: stopDrawing,
+          onTouchStart: startDrawing,
+          onTouchMove: draw,
+          onTouchEnd: stopDrawing,
+          className: "cursor-crosshair border border-zinc-700 rounded touch-none",
+          style: {
+            width: `${displayWidth}px`,
+            height: `${displayHeight}px`,
+            maxWidth: "100%",
+            maxHeight: "calc(95vh - 200px)"
+          }
+        }
+      ) })
+    ] })
+  ] }) });
+}
 function ScreenshotButton({
   screenshot,
-  onScreenshotTook
+  onScreenshotTook,
+  language = "en"
 }) {
   const [isTakenScreenshot, setIsTakenScreenShot] = react$1.useState(false);
+  const [showEditor, setShowEditor] = react$1.useState(false);
+  const [tempScreenshot, setTempScreenshot] = react$1.useState(null);
   async function handleTakeScreenshot() {
     setIsTakenScreenShot(true);
     const canvas = await html2canvas__default.default(document.querySelector("html"));
     const base64image = canvas.toDataURL("image/png");
-    onScreenshotTook(base64image);
+    setTempScreenshot(base64image);
+    setShowEditor(true);
     setIsTakenScreenShot(false);
   }
+  function handleEditorSave(editedScreenshot) {
+    onScreenshotTook(editedScreenshot);
+    setShowEditor(false);
+    setTempScreenshot(null);
+  }
+  function handleEditorCancel() {
+    setShowEditor(false);
+    setTempScreenshot(null);
+  }
+  function handleEditScreenshot() {
+    if (screenshot) {
+      setTempScreenshot(screenshot);
+      setShowEditor(true);
+    }
+  }
+  if (showEditor && (tempScreenshot || screenshot)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ScreenshotEditor,
+        {
+          screenshot: tempScreenshot || screenshot,
+          onSave: handleEditorSave,
+          onCancel: handleEditorCancel,
+          language
+        }
+      ),
+      screenshot && !tempScreenshot ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "p-1 w-10 h-10 rounded-md border-transparent flex \n                    justify-end items-end text-zinc-400 hover:text-zinc-100 transition-colors",
+          onClick: () => onScreenshotTook(null),
+          style: {
+            backgroundImage: `url(${screenshot})`,
+            backgroundPosition: "right bottom",
+            backgroundSize: 180
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Trash, { weight: "fill" })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "p-2 bg-zinc-800 rounded-md border-transparent hover:bg-zinc-700\n               transitions-colors focus:outline-none focus:ring-2\n               focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500",
+          onClick: handleTakeScreenshot,
+          children: isTakenScreenshot ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Camera, { weight: "bold", className: "w-6 h-6" })
+        }
+      )
+    ] });
+  }
   if (screenshot) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "p-1 w-10 h-10 rounded-md border-transparent flex \n                justify-end items-end text-zinc-400 hover:text-zinc-100 transition-colors",
-        onClick: () => onScreenshotTook(null),
-        style: {
-          backgroundImage: `url(${screenshot})`,
-          backgroundPosition: "right bottom",
-          backgroundSize: 180
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Trash, { weight: "fill" })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "p-1 w-10 h-10 rounded-md border-transparent flex \n                  justify-end items-end text-zinc-400 hover:text-zinc-100 transition-colors relative",
+          onClick: handleEditScreenshot,
+          style: {
+            backgroundImage: `url(${screenshot})`,
+            backgroundPosition: "right bottom",
+            backgroundSize: 180
+          },
+          title: language === "nl" ? "Klik om te bewerken" : "Click to edit",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors rounded-md" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onScreenshotTook(null);
+          },
+          className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10",
+          title: language === "nl" ? "Verwijderen" : "Delete",
+          children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-3 h-3 text-white" })
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -260,18 +565,18 @@ function FileUploadButton({
               {
                 src: uploadedFile.preview,
                 alt: uploadedFile.file.name,
-                className: "w-6 h-6 object-cover rounded"
+                className: "w-5 h-5 md:w-6 md:h-6 object-cover rounded flex-shrink-0"
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Paperclip, { className: "w-4 h-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-300 max-w-[100px] truncate", title: uploadedFile.file.name, children: uploadedFile.file.name }),
+            ) : /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.Paperclip, { className: "w-3 h-3 md:w-4 md:h-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-300 max-w-[80px] md:max-w-[100px] truncate", title: uploadedFile.file.name, children: uploadedFile.file.name }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemoveFile(uploadedFile.id),
-                className: "text-zinc-400 hover:text-zinc-100 transition-colors",
+                className: "text-zinc-400 hover:text-zinc-100 transition-colors flex-shrink-0 touch-manipulation",
                 title: t.remove,
-                children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.X, { weight: "bold", className: "w-3 h-3 md:w-4 md:h-4" })
               }
             )
           ]
@@ -847,34 +1152,34 @@ function FeedbackContentStep({
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative w-full pr-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative w-full pr-8 md:pr-8", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          className: "absolute top-5 left-5 text-zinc-400 hover:text-zinc-100 z-10",
+          className: "absolute top-3 md:top-5 left-3 md:left-5 text-zinc-400 hover:text-zinc-100 z-10 p-1",
           onClick: onFeedbackRestartRequest,
-          children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ArrowLeft, { weight: "bold", className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ArrowLeft, { weight: "bold", className: "w-4 h-4 md:w-4 md:h-4" })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xl leading-6 flex items-center gap-2 mt-2 pl-10", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg md:text-xl leading-6 flex items-center gap-2 mt-2 pl-8 md:pl-10", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
             src: feedbackTypeData.image.source,
             alt: feedbackTypeData.image.alt,
-            className: "w-6 h-6"
+            className: "w-5 h-5 md:w-6 md:h-6"
           }
         ),
         feedbackTypeData.title
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { className: "absolute top-5 right-5", title: t.form.closeButton })
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { className: "absolute top-3 md:top-5 right-3 md:right-5", title: t.form.closeButton })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmitFeedback, className: "my-4 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmitFeedback, className: "my-3 md:my-4 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
-          className: "min-w-[384px] w-full min-h-[112px] text-sm \n        placeholder-zinc-400 text-zinc-100 border-zinc-600 bg-transparent rounded-md \n        focus:border-brand-500 focus:ring-brand-500 focus:ring-1  resize-none focus:outline-none\n          scrollbar-thumb-zinc-700 scrollbar-track-transparent scrollbar-thin",
+          className: "w-full min-h-[100px] md:min-h-[112px] text-sm \n        placeholder-zinc-400 text-zinc-100 border border-zinc-600 bg-transparent rounded-md p-2 md:p-3\n        focus:border-brand-500 focus:ring-brand-500 focus:ring-1 resize-none focus:outline-none\n          scrollbar-thumb-zinc-700 scrollbar-track-transparent scrollbar-thin",
           placeholder: t.content.placeholder,
           onChange: (e) => setComment(e.target.value)
         }
@@ -887,12 +1192,13 @@ function FeedbackContentStep({
           language
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: " flex gap-2 mt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex gap-2 mt-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ScreenshotButton,
           {
             screenshot,
-            onScreenshotTook: setScreenshot
+            onScreenshotTook: setScreenshot,
+            language
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -900,7 +1206,7 @@ function FeedbackContentStep({
           {
             type: "submit",
             disabled: comment.length === 0 || isSendingFeedback,
-            className: "p-2 bg-brand-500 rounded-md border-transparent flex-1 justify-center\n          items-center text-sm hover:bg-brand-300 focus:outline-none focus:ring-2\n           focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500\n           transition-colors disabled:opacity-50 disabled:cursor-not-allowed\n           disabled:hover:bg-brand-500",
+            className: "p-2 bg-brand-500 rounded-md border-transparent flex-1 justify-center\n          items-center text-sm hover:bg-brand-300 focus:outline-none focus:ring-2\n           focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500\n           transition-colors disabled:opacity-50 disabled:cursor-not-allowed\n           disabled:hover:bg-brand-500 flex",
             children: isSendingFeedback ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : t.content.sendButton
           }
         )
@@ -912,12 +1218,12 @@ function FeedbackSuccessStep({ onFeedbackRestartRequest, language }) {
   const t = getTranslations(language);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { title: t.form.closeButton }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-10 w-[304px]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "41", height: "40", viewBox: "0 0 41 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-8 md:py-10 w-full max-w-[304px] px-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "41", height: "40", viewBox: "0 0 41 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "w-10 h-10 md:w-[41px] md:h-[40px]", children: [
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M38.5 34C38.5 36.209 36.709 38 34.5 38H6.5C4.291 38 2.5 36.209 2.5 34V6C2.5 3.791 4.291 2 6.5 2H34.5C36.709 2 38.5 3.791 38.5 6V34Z", fill: "#77B255" }),
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M31.78 8.36202C30.624 7.61102 29.076 7.94002 28.322 9.09802L17.436 25.877L12.407 21.227C11.393 20.289 9.81103 20.352 8.87403 21.365C7.93703 22.379 7.99903 23.961 9.01303 24.898L16.222 31.564C16.702 32.009 17.312 32.229 17.918 32.229C18.591 32.229 19.452 31.947 20.017 31.09C20.349 30.584 32.517 11.82 32.517 11.82C33.268 10.661 32.938 9.11302 31.78 8.36202Z", fill: "white" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl mt-2", children: t.success.message }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg md:text-xl mt-2 text-center", children: t.success.message }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -963,7 +1269,7 @@ function WidgetForm({ integration, githubConfig, language }) {
     setFeedbackSent(false);
     setFeedbackType(null);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900 p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-zinc-900 p-3 md:p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto max-w-md", children: [
     feedbackSent ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackSuccessStep, { onFeedbackRestartRequest: handleRestartFeedback, language }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !feedbackType ? /* @__PURE__ */ jsxRuntime.jsx(FeedbackTypeStep, { onFeedbackTypeChanged: setFeedbackType, language }) : /* @__PURE__ */ jsxRuntime.jsx(
       FeedbackContentStep,
       {
@@ -975,7 +1281,7 @@ function WidgetForm({ integration, githubConfig, language }) {
         language
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "text-xs text-neutral-400", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "text-xs text-neutral-400 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
         className: "underline underline-offset-2",
@@ -1017,9 +1323,9 @@ function Widget({
         language: finalLanguage
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Button, { className: "bg-brand-500 rounded-full px-3 h-12 text-white flex items-center group focus:outline-none", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ChatTeardropDots, { className: "w-6 h-6" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 ease-linear", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Button, { className: "bg-brand-500 rounded-full px-3 md:px-3 h-12 text-white flex items-center group focus:outline-none shadow-lg hover:shadow-xl transition-shadow", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(phosphorReact.ChatTeardropDots, { className: "w-6 h-6 flex-shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "max-w-0 overflow-hidden group-hover:max-w-xs md:group-hover:max-w-xs transition-all duration-500 ease-linear hidden md:block", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-2" }),
         t.widget.button
       ] })