fix: preview bugs

[Dhruwang]

What does this PR do?

Fixes 1937

Fixes below mentioned issues

Slide up animation not working

Screen.Recording.2024-02-27.at.4.46.04.PM.mov

Broken Rating question (scale: star)

Double scroll bar for multi-choice question, file upload, picture select and cal question

Screen.Recording.2024-02-27.at.4.48.33.PM.mov

Broken rating question (scale:smiley)

Missing min width

How should this be tested?

Survey editor preview

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Feb 28, 2024 5:43am
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Feb 28, 2024 5:43am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx

Consider using a switch statement instead of multiple if-else statements to improve the readability of the code.
Create Issue
See the diff
Checkout the fix

    // Use a switch statement
    let placementClass = "";
    switch (placement) {
      case "bottomLeft":
        placementClass = "bottom left";
        break;
      case "bottomRight":
        placementClass = "bottom right";
        break;
      case "topLeft":
        placementClass = "top left";
        break;
      case "topRight":
        placementClass = "top right";
        break;
    }

git fetch origin && git checkout -b ReviewBot/Impro-j1dgdgv origin/ReviewBot/Impro-j1dgdgv

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx

The variable name 'shrink' is not very descriptive and does not clearly convey its purpose. A more descriptive name like 'isFullScreenShrink' would make the code easier to understand.
Create Issue
See the diff
Checkout the fix

    const [isFullScreenShrink, setIsFullScreenShrink] = useState(false);

git fetch origin && git checkout -b ReviewBot/Impro-b60fot9 origin/ReviewBot/Impro-b60fot9

packages/surveys/src/components/general/Smileys.tsx

Consider adding a CSS class to the SVG elements and use CSS to control their size. This will make the SVGs more flexible and easier to control from a central location.
Create Issue
See the diff
Checkout the fix

    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" className="svg-icon">
    ```
    And in your CSS file:
    ```css
    .svg-icon {
      width: 48px;
      height: 48px;
    }

git fetch origin && git checkout -b ReviewBot/Remov-3ctjzd2 origin/ReviewBot/Remov-3ctjzd2

[mattinannt]

@Dhruwang thanks a lot for the fixes 😊💪🚀

[mattinannt]

@Dhruwang It seems like there's an e2e error. Can you please take a look? 😊