Create ResponsiveComponent Block

[jimwei1]

Description

Create ResponsiveComponent to handle different page variants (Desktop / Mobile / etc.)

How has this been tested?

Test component

Mobile:

Desktop:

Tickets

closes LAY-2126

---

Note

Introduces a reusable responsive wrapper and streamlines element sizing across components.

• Add ui/ResponsiveComponent with slots and resolveVariant to render Desktop/Mobile variants based on container width; includes basic styles
• Refactor useElementSize to accept a single size object ({ width, height }), trigger initial measurement on mount, and use ResizeObserver border-box sizes with light debounce
• Update BankTransactions and Tabs to the new useElementSize signature and adjust width/height handling accordingly

^{Written by Cursor Bugbot for commit 3335877. This will update automatically on new commits. Configure here.}

Context used:

• Rule from dashboard - In Typescript files, use type declarations instead of interface declarations if the object is in... (source)

[augmentcode]

🤖 Augment PR Summary

Summary: Adds a reusable ResponsiveComponent that selects and renders a variant (Desktop/SmallDesktop/Mobile or custom) based on its container width.

Changes:

• Introduced a generic ResponsiveComponent with slots + resolveVariant API.
• Uses useElementSize (ResizeObserver) to track container width and update the active variant.
• Added scoped styles so the wrapper fills its parent (height/width 100%).

Technical Notes: Variant updates are driven by resize observation of the component’s own wrapper element (not window size), enabling responsive behavior inside nested layouts.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 2 suggestions posted.

Comment augment review to trigger a new review at any time.

[cursor]

Removed truthy check allows zero width update

Low Severity

The condition was changed from c.width && c?.width !== currentWidth to size.width !== currentWidth, removing the truthy check on width. Previously, when the element's width became 0 (e.g., when hidden), currentWidth would retain its last non-zero value. Now it will update to 0, which triggers updateSelectPosition via the useEffect dependency on currentWidth. This could cause incorrect thumb positioning calculations when the tabs component is temporarily hidden and then shown again.