fix: style DataTableSelectionBar (#20403)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user