isolate RecordingToast and EditToast via IframeWrapper

[elg0nz]

Summary by CodeRabbit

• New Features

  • Introduced an IframeWrapper component to enhance the layout of toast notifications.
  • Added minimum width styling to improve iframe usability.
  • Integrated new styles from spinner.css for improved visual presentation of the RecordButton.

• Bug Fixes

  • Improved the rendering structure of toast components to prevent overlap with other UI elements.

[linear]

MOC-90 Prevent Mocksi plugin from inheriting styles

[coderabbitai]

Walkthrough

Walkthrough

Recent updates have enhanced the usability and layout of the mocksi-lite application. Key modifications include the introduction of an IframeWrapper component, which provides better structure for the Toast notifications, ensuring they are displayed correctly without overlap. Additionally, CSS enhancements have been made, such as setting a minimum width for iframe contents and importing new styles to improve the visual presentation of buttons.

Changes

File Path	Change Summary
apps/mocksi-lite/content/IframeWrapper.tsx	Added minimum width of 500 pixels for iframe content to enhance layout and usability.
apps/mocksi-lite/content/RecordButton.tsx	Imported spinner.css to improve styling; no changes to functionality.
apps/mocksi-lite/content/Toast/EditToast.tsx	Wrapped Toast component in IframeWrapper and added iframeStyle for enhanced layout.
apps/mocksi-lite/content/Toast/RecordingToast.tsx	Wrapped Toast with IframeWrapper to improve rendering; added iframeStyle for visual control.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant EditToast
    participant IframeWrapper
    participant Toast

    User->>EditToast: Click to open toast
    EditToast->>IframeWrapper: Prepare iframe
    IframeWrapper->>Toast: Render toast content
    Note right of IframeWrapper: Ensures layout integrity
    Toast-->>User: Display notification

Loading

🐰 In a world of toast and iframe,
A rabbit hops with joy and fame.
New styles and wrappers, oh what a sight,
Making our UI feel just right!
With spinners and toasts, we dance with glee,
Improvements abound, oh come see! 🌟

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 6f13196 and fd492a9.

Files selected for processing (4)

• apps/mocksi-lite/content/IframeWrapper.tsx (1 hunks)
• apps/mocksi-lite/content/RecordButton.tsx (1 hunks)
• apps/mocksi-lite/content/Toast/EditToast.tsx (2 hunks)
• apps/mocksi-lite/content/Toast/RecordingToast.tsx (2 hunks)

Files skipped from review due to trivial changes (1)

• apps/mocksi-lite/content/RecordButton.tsx

Additional comments not posted (9)

apps/mocksi-lite/content/Toast/RecordingToast.tsx (4)

6-6: LGTM! Import statement is correct.

The import statement for IframeWrapper is correctly added.

---

17-21: LGTM! Style object is well-defined.

The iframeStyle object is defined with appropriate CSS properties for positioning and styling the iframe.

---

24-47: LGTM! Correct usage of IframeWrapper.

The IframeWrapper component is correctly used to wrap the Toast component, enhancing its layout.

---

24-47: LGTM! Return statement is correctly structured.

The return statement correctly includes the IframeWrapper and Toast components, maintaining the component's core functionality.

apps/mocksi-lite/content/IframeWrapper.tsx (1)

79-79: LGTM! Style enhancement is appropriate.

The new line of code sets a minimum width of 500 pixels for the iframe's document body, enhancing its styling.

apps/mocksi-lite/content/Toast/EditToast.tsx (4)

8-8: LGTM! Import statement is correct.

The import statement for IframeWrapper is correctly added.

---

38-43: LGTM! Style object is well-defined.

The iframeStyle object is defined with appropriate CSS properties for positioning and styling the iframe.

---

46-89: LGTM! Correct usage of IframeWrapper.

The IframeWrapper component is correctly used to wrap the Toast component, enhancing its layout.

---

46-89: LGTM! Return statement is correctly structured.

The return statement correctly includes the IframeWrapper and Toast components, maintaining the component's core functionality.