Unknwon extra space on the mobile screen when using a data table.

[oninoor]

Disclaimer: I am new to using Next JS and Shadcn.

I have encountered an issue of extra space when using a data table. This extra space appears on mobile screens. I have tried investigating the issue using inspect but couldn't identify any specific element causing the extra space. There is a possibility that this issue is related to the component, including all the components within it, because when I remove the component, the extra space disappears. Here is an image illustrating the problem I am experiencing.

This is the expected display on a mobile screen. There are no issues until I swipe to the left, at which point there is extra space on the right side, as shown in the image below.

These are the dimensions of the elements when inspecting them, and there doesn't seem to be any element with extra dimensions causing the additional space. I'm unsure of the cause of this problem, so if you have any solutions, please share them here. Thank you for reading.

[oninoor]

"use client";
import { Row } from "@tanstack/react-table";
import { Copy, MoreHorizontal, Pen, Star, Tags, Trash } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { labels } from "./template-cell";
import { Tasks } from "@/interfaces/proyekInterfaces";
interface DataTableRowActionsProps {
  row: Row<Tasks>;
}

export function DataTableRowActions({ row }: DataTableRowActionsProps) {
  const task: Tasks = {
    id: row.original.id,
    title: row.original.title,
    status: row.original.status,
    label: row.original.label,
    priority: row.original.priority,
    deadline: row.original.deadline,
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
        >
          <MoreHorizontal className="h-4 w-4" />
          {/* <span className="sr-only">Open menu</span> */}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[160px]">
        <DropdownMenuItem>
          <Pen className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Edit
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Copy className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Make a copy
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Star className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Favorite
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <Tags className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            Labels
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuRadioGroup value={task.label}>
              {labels.map((label) => (
                <DropdownMenuRadioItem key={label.value} value={label.value}>
                  {label.label}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Trash className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
          Delete
          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

I have identified the issue. It turns out that there was a problem with the element having the class "sr-only." Once I removed it, everything worked fine.

[iamshubhamjangle]

I am facing similar issue with Select component