Set the width of the wrapper div to 100% to preserve the "full width" expectation of embedded components (#86) (#87)

Author: jorgea-stripe

src/useCreateComponent.tsx

@@ -14,11 +14,16 @@ export const useCreateComponent = <T extends ConnectElementTagName>(
   >(null);
   const {connectInstance} = useConnectComponents();
   const wrapperDivRef = React.useRef<HTMLDivElement | null>(null);
-  const wrapper = <div ref={wrapperDivRef}></div>;
+
+  // We set width to 100% to preserve this functionality aspect of embedded components even though
+  // we are introducing a wrapper div for this element
+  // https://docs.corp.stripe.com/connect/get-started-connect-embedded-components#width-and-height
+  const wrapper = <div style={{width: '100%'}} ref={wrapperDivRef}></div>;
 
   React.useLayoutEffect(() => {
     if (wrapperDivRef.current !== null && component === null) {
       const newComponent = connectInstance.create(tagName);
+
       setComponent(newComponent);
       if (newComponent !== null) {
         try {