shadcn ui select dropdown opens top left

[bekauridev]

I have a normal select component, and the problem is when I click the trigger, the select content is coming from the top left, it's coming from very far, and I really want to know why

  <div>
      <label className="block text-sm font-medium text-gray-700 mb-2">Type</label>
      <Select value={value} onValueChange={onChange}>
        <SelectTrigger className="w-full px-4 py-2 border border-gray-300 rounded-lg">
          <SelectValue placeholder="Select Gradient Type" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="linear">Linear</SelectItem>
          <SelectItem value="radial">Radial</SelectItem>
        </SelectContent>
      </Select>
    </div>

ColorCraft-video.mp4