Vaul forces full width wherever the component is used and messes up the styling of the parent component/section

[Strangersknowme]

I am using vaul to make a web component, a button, which is to be embedded on any ecom store. When this web component is loaded on that page, it completely messes up the styling of that page shown as in the example image below.

I don't know why Vaul is forcing full width wherever the component is used. I have checked my code and I have not added any width classes which might cause this issue which makes me believe the issue is likely with how vaul is mounted or its style assets.

I want the button to appear below the color section without messing up the styling of the store.

How the store looks without the component:

How the store actually looks when using the button component:

Here's the code that I am using for making this button:

<Drawer.Root
      direction="right"
      dismissible={false}
      open={openCloseButton}
      shouldScaleBackground={false}
      modal={false}
    >
      <Drawer.Trigger asChild>
        <button
          onClick={() => {
            setOpenClose(true);
          }}
          className="p-2  text-center text-black border 
            shadow-xl flex flex-col justify-center items-center 
           backdrop-blur-lg  tracking-wide 
             bg-[#AFA89C] border-gray-400/50
             rounded-3xl basis-full lg:basis-2/6 text-md"
        >
          <div className="flex flex-row justify-between items-center">
            <span>
              <img
                src="/Logo-Mask_favicon.svg"
                priority="high"
                width={40}
                height={100}
              />
            </span>
             <span>My Button</span>
          </div>
        </button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content
          className="flex items-center  max-w-lg bg-white fixed bottom-0 right-0 top-0  h-full flex-col rounded-l-lg"
        >
        {/* Rest of the content here*/}
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>

Why is this forcing full width and messing up the styling?

Any help would be highly appreciated.

[joaom00]

hey! It's hard to say without a reproducible example. it could be so many things