feedback-vos 1.0.35 → 1.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -2
- package/dist/index.js +21 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +21 -4
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -131,7 +131,7 @@ When feedback is submitted:
|
|
|
131
131
|
|
|
132
132
|
### Widget Not Visible
|
|
133
133
|
|
|
134
|
-
If the widget is not showing up, check the following:
|
|
134
|
+
The widget uses inline styles to ensure it's always visible, even with CSS conflicts. If the widget is still not showing up, check the following:
|
|
135
135
|
|
|
136
136
|
1. **Verify the client component wrapper is created correctly:**
|
|
137
137
|
- Ensure `'use client'` directive is at the top of your `FeedbackWidget.tsx`
|
|
@@ -150,7 +150,16 @@ If the widget is not showing up, check the following:
|
|
|
150
150
|
- The widget uses `z-50` for positioning - ensure no other styles override this
|
|
151
151
|
- Verify Tailwind CSS is properly configured in your project
|
|
152
152
|
- **CRITICAL:** The widget requires `brand` colors in your Tailwind config (see Requirements section below)
|
|
153
|
-
- **Widget outside viewport:** If the widget appears outside the screen
|
|
153
|
+
- **Widget outside viewport or not visible:** If the widget appears outside the screen or is not visible, add this CSS to your global stylesheet (e.g., `globals.css`):
|
|
154
|
+
```css
|
|
155
|
+
[data-feedback-widget="true"] {
|
|
156
|
+
position: fixed !important;
|
|
157
|
+
bottom: 1rem !important;
|
|
158
|
+
right: 1rem !important;
|
|
159
|
+
z-index: 9999 !important;
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
This ensures the widget is always visible regardless of CSS conflicts or parent container transforms.
|
|
154
163
|
|
|
155
164
|
5. **Debug in browser console:**
|
|
156
165
|
```javascript
|
package/dist/index.js
CHANGED
|
@@ -1440,15 +1440,32 @@ function Widget({
|
|
|
1440
1440
|
const isLeft = position.includes("left");
|
|
1441
1441
|
const panelPositionClass = isTop ? "absolute top-full mt-2" : "absolute bottom-full mb-2";
|
|
1442
1442
|
const panelAlignmentClass = isLeft ? "left-0" : "right-0";
|
|
1443
|
+
const getPositionStyles = () => {
|
|
1444
|
+
const baseStyles = {
|
|
1445
|
+
position: "fixed",
|
|
1446
|
+
zIndex: 9999
|
|
1447
|
+
};
|
|
1448
|
+
if (position === "bottom-right") {
|
|
1449
|
+
baseStyles.bottom = "1rem";
|
|
1450
|
+
baseStyles.right = "1rem";
|
|
1451
|
+
} else if (position === "bottom-left") {
|
|
1452
|
+
baseStyles.bottom = "1rem";
|
|
1453
|
+
baseStyles.left = "1rem";
|
|
1454
|
+
} else if (position === "top-right") {
|
|
1455
|
+
baseStyles.top = "1rem";
|
|
1456
|
+
baseStyles.right = "1rem";
|
|
1457
|
+
} else if (position === "top-left") {
|
|
1458
|
+
baseStyles.top = "1rem";
|
|
1459
|
+
baseStyles.left = "1rem";
|
|
1460
|
+
}
|
|
1461
|
+
return baseStyles;
|
|
1462
|
+
};
|
|
1443
1463
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1444
1464
|
"div",
|
|
1445
1465
|
{
|
|
1446
1466
|
"data-feedback-widget": "true",
|
|
1447
1467
|
className: `fixed ${positionClasses[position]} z-50`,
|
|
1448
|
-
style:
|
|
1449
|
-
position: "fixed",
|
|
1450
|
-
zIndex: 50
|
|
1451
|
-
},
|
|
1468
|
+
style: getPositionStyles(),
|
|
1452
1469
|
children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover, { className: "relative", children: [
|
|
1453
1470
|
/* @__PURE__ */ jsxRuntime.jsx(react.Popover.Panel, { className: `${panelPositionClass} ${panelAlignmentClass}`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1454
1471
|
WidgetForm,
|