Layout and Interaction Issues in StackBlitz

[heloiselui]

Package:
@carbon/react

Browser:
Chrome

Package Version:
v1.75.0

Description:

While working with @carbon/react components, several tooltip-related issues were identified, affecting layout. In particular, tooltips are being cut off, text is unreadable, and scrolling does not behave as expected in certain cases. Addressing these problems will help improve the overall user experience and ensure better interaction consistency.

Tasks:

• CopyButton

  • Problem: Tooltip is cut off when hovering, resulting in incomplete text display.
  • Expected Fix: Adjust tooltip positioning to ensure it is fully visible when the user hovers over the button.

• DatePicker

  • Problem: Tooltip is cut off, and scrolling doesn't work properly on the overview page.
  • Expected Fix: Ensure the tooltip is properly rendered and the scrolling feature works without issues.

• Tooltip (Default)

  • Problem: The text inside the tooltip is not readable, and the layout is distorted.
  • Expected Fix: Adjust the layout and ensure the tooltip text is clear.

For reference, in the codePreview.tsx file, you can check the rules and adjustments we apply to ensure that Storybook code is transformed correctly into a format that StackBlitz can interpret.