shadcn dropdown sub content to align at the bottom

Question

so I have a dropdown with a subcontent,from shadcn using radix-ui.

I want the subcontent to align at the bottom of the dropdown because right now it goes out of screen on mobile phones. (it alignes left, as shown on the picture) as I can see the radix ui does not have props for align and start for the dropdown sub menu content. i tried to work with sideOffset and alignoffset but couldnt manage it correctly

this is the code:

  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="outline">
        <FiFilter className="ml-2 h-4 w-4" />
        {hebrewTranslations['filter']}
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent className="w-56" align="start">
      <DropdownMenuLabel>{hebrewTranslations['filterBy']}</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          {hebrewTranslations['status']}
        </DropdownMenuSubTrigger>
        <DropdownMenuPortal>
          <DropdownMenuSubContent className="absolute right-0 top-full mt-2">
            <DropdownMenuItem className="cursor-pointer">
              <div
                className="flex items-center gap-2"
                onClick={() => changeStatus(status === 'handled' ? '' : 'handled')}
              >
                <Checkbox checked={status === 'handled'} />
                <span className="text-green-600 dark:text-green-200">
                  {hebrewTranslations['Handled']}
                </span>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer">
              <div
                className="flex items-center gap-2"
                onClick={() => changeStatus(status === 'pending' ? '' : 'pending')}
              >
                <Checkbox checked={status === 'pending'} />
                <span className="text-gray-500 dark:text-gray-400">
                  {hebrewTranslations['Pending']}
                </span>
              </div>
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuPortal>
      </DropdownMenuSub>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          {hebrewTranslations['gender']}
        </DropdownMenuSubTrigger>
        <DropdownMenuPortal>
          <DropdownMenuSubContent className="absolute right-0 top-full mt-2">
            <DropdownMenuItem className="cursor-pointer">
              <div
                className="flex items-center gap-2"
                onClick={() => changeGender(gender === 'male' ? '' : 'male')}
              >
                <Checkbox checked={gender === 'male'} />
                <span className="text-gray-500 dark:text-gray-400">
                  {hebrewTranslations['male']}
                </span>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer">
              <div
                className="flex items-center gap-2"
                onClick={() => changeGender(gender === 'female' ? '' : 'female')}
              >
                <Checkbox checked={gender === 'female'} />
                <span className="text-gray-500 dark:text-gray-400">
                  {hebrewTranslations['female']}
                </span>
              </div>
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuPortal>
      </DropdownMenuSub>
    </DropdownMenuContent>
  </DropdownMenu>