[BUG] Class Name Conflicts

[jonas-hoebenreich]

Issue Summary

Currently, website surveys are displayed incorrectly on websites that inadvertently overwrite tailwind classes.
Suppose developer Dave has added an element that uses the following CSS:

.border {
    position:absolute;
    left: 0;
    width:100%;
    height:1px;
    background-color: gray;
}

As the survey modal also uses the "border" class, this CSS is now also applied to the survey, making the survey completely unusable.

Steps to Reproduce

1. Try to display a survey on a page that has the following CSS:

.border {
    position:absolute;
    left: 0;
    width:100%;
    height:1px;
    background-color: gray;
}

2. Survey is not usable

Expected behavior

Surveys look nice on all types of websites (regardless of other CSS on that page).

Solution:
Formbricks should encapsulate the survey from the rest of the page. And / or it should not use common class names ("border" etc.) by eg adding a prefix to the classes to make collisions less likely.

Other information

No response

Screenshots

No response

Environment

• Formbricks Cloud (app.formbricks.com)
• Self-hosted Formbricks

Desktop (please complete the following information)

- OS:
- Node:
- npm: