fix: style DataTableSelectionBar (#20403)

This commit is contained in:
Eunjae Lee
2025-03-27 14:29:45 +00:00
committed by GitHub
parent f062014952
commit ea250febbc
4 changed files with 9 additions and 13 deletions
@@ -4,9 +4,9 @@ import type { Table } from "@tanstack/react-table";
import { forwardRef } from "react";
import { createPortal } from "react-dom";
import classNames from "@calcom/ui/classNames";
import type { ButtonProps } from "@calcom/ui/components/button";
import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
import { Icon } from "@calcom/ui/components/icon";
import type { IconName } from "@calcom/ui/components/icon";
@@ -54,7 +54,7 @@ const Root = forwardRef<
<div
ref={ref}
className={classNames(
"bg-default text-emphasis shadow-outline-gray-rested fixed bottom-0 left-0 flex w-full items-center space-x-1 overflow-x-auto border px-2 py-2 sm:space-x-2 md:bottom-4 md:left-1/2 md:z-auto md:w-fit md:-translate-x-1/2 md:transform md:space-x-3 md:overflow-x-hidden md:rounded-lg md:px-4",
"bg-default text-emphasis shadow-outline-gray-rested border-subtle fixed left-0 right-0 flex items-center space-x-1 overflow-x-auto border px-2 py-2 sm:space-x-2 md:left-1/2 md:z-auto md:w-fit md:-translate-x-1/2 md:transform md:space-x-3 md:overflow-x-hidden md:rounded-lg md:px-4",
className
)}
style={{ ...style }}
@@ -688,12 +688,12 @@ function MemberListContent(props: Props) {
</DataTableToolbar.Root>
{numberOfSelectedRows >= 2 && dynamicLinkVisible && (
<DataTableSelectionBar.Root className="!bottom-16 md:!bottom-20">
<DataTableSelectionBar.Root className="!bottom-[7.3rem] md:!bottom-32">
<DynamicLink table={table} domain={domain} />
</DataTableSelectionBar.Root>
)}
{numberOfSelectedRows > 0 && (
<DataTableSelectionBar.Root className="justify-center">
<DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
<p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
{t("number_selected", { count: numberOfSelectedRows })}
</p>
@@ -16,10 +16,10 @@ import {
import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import { Badge } from "@calcom/ui/components/badge";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { Avatar } from "@calcom/ui/components/avatar";
import { Badge } from "@calcom/ui/components/badge";
import { Checkbox } from "@calcom/ui/components/form";
import { SkeletonText } from "@calcom/ui/components/skeleton";
import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
import { DeleteMemberModal } from "./DeleteMemberModal";
@@ -304,7 +304,7 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
</div>
{numberOfSelectedRows > 0 && (
<DataTableSelectionBar.Root className="justify-center">
<DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
<p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
{t("number_selected", { count: numberOfSelectedRows })}
</p>
@@ -539,16 +539,12 @@ function UserListTableContent() {
}
ToolbarRight={<DataTableFilters.ClearFiltersButton />}>
{numberOfSelectedRows >= 2 && dynamicLinkVisible && (
<DataTableSelectionBar.Root className="!bottom-16 md:!bottom-20">
<DataTableSelectionBar.Root className="!bottom-[7.3rem] md:!bottom-32">
<DynamicLink table={table} domain={domain} />
</DataTableSelectionBar.Root>
)}
{numberOfSelectedRows > 0 && (
<DataTableSelectionBar.Root
className="justify-center"
style={{
width: "max-content",
}}>
<DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
<p className="text-brand-subtle shrink-0 px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
{t("number_selected", { count: numberOfSelectedRows })}
</p>