fix: Labels overflow in peek, detail view (#3995)

This commit is contained in:
Lakhan Baheti 2024-03-20 18:07:11 +05:30 committed by GitHub
parent 901a7703ff
commit 4ea616f1cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 5 deletions

View File

@ -7,6 +7,8 @@ import { IIssueLabel } from "@plane/types";
// hooks // hooks
import { Input, TOAST_TYPE, setToast } from "@plane/ui"; import { Input, TOAST_TYPE, setToast } from "@plane/ui";
import { useIssueDetail } from "@/hooks/store"; import { useIssueDetail } from "@/hooks/store";
// helpers
import { cn } from "helpers/common.helper";
// ui // ui
// types // types
import { TLabelOperations } from "./root"; import { TLabelOperations } from "./root";
@ -29,6 +31,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
// hooks // hooks
const { const {
issue: { getIssueById }, issue: { getIssueById },
peekIssue,
} = useIssueDetail(); } = useIssueDetail();
// state // state
const [isCreateToggle, setIsCreateToggle] = useState(false); const [isCreateToggle, setIsCreateToggle] = useState(false);
@ -82,13 +85,13 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
</div> </div>
{isCreateToggle && ( {isCreateToggle && (
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleLabel)}> <form className="relative flex items-center gap-x-2" onSubmit={handleSubmit(handleLabel)}>
<div> <div>
<Controller <Controller
name="color" name="color"
control={control} control={control}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Popover className="relative"> <Popover>
<> <>
<Popover.Button className="grid place-items-center outline-none"> <Popover.Button className="grid place-items-center outline-none">
{value && value?.trim() !== "" && ( {value && value?.trim() !== "" && (
@ -110,8 +113,14 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0"> <Popover.Panel
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} /> className={cn("absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0", !peekIssue ? "right-0" : "")}
>
<TwitterPicker
triangle={!peekIssue ? "hide" : "top-left"}
color={value}
onChange={(value) => onChange(value.hex)}
/>
</Popover.Panel> </Popover.Panel>
</Transition> </Transition>
</> </>

View File

@ -56,7 +56,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const { styles, attributes } = usePopper(referenceElement, popperElement, { const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-start", placement: "bottom-end",
modifiers: [ modifiers: [
{ {
name: "preventOverflow", name: "preventOverflow",