github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: label color select popover overflow (#1949)

Browse Source 
Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
This commit is contained in:
Aaryan Khandelwal 2023-08-23 15:43:09 +05:30 committed by GitHub
parent 561fb9815b
commit a8fdd42cb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/app/components/issues/sidebar-select/label.tsx
View File

@ -17,13 +17,7 @@ import useUser from "hooks/use-user";
// ui // ui
import { Input, Spinner } from "components/ui"; import { Input, Spinner } from "components/ui";
// icons // icons
import { import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
ChevronDownIcon,
PlusIcon,
RectangleGroupIcon,
TagIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
// types // types
import { IIssue, IIssueLabels } from "types"; import { IIssue, IIssueLabels } from "types";
// fetch-keys // fetch-keys
@ -281,18 +275,15 @@ export const SidebarLabelSelect: React.FC<Props> = ({
<Popover className="relative"> <Popover className="relative">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button className="grid place-items-center outline-none">
className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
>
{watch("color") && watch("color") !== "" && ( {watch("color") && watch("color") !== "" && (
<span <span
className="h-5 w-5 rounded" className="h-6 w-6 rounded"
style={{ style={{
backgroundColor: watch("color") ?? "black", backgroundColor: watch("color") ?? "black",
}} }}
/> />
)} )}
<ChevronDownIcon className="h-3 w-3" />
</Popover.Button> </Popover.Button>
<Transition <Transition
@ -304,7 +295,7 @@ export const SidebarLabelSelect: React.FC<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 right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0"> <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
<Controller <Controller
name="color" name="color"
control={labelControl} control={labelControl}

4
apps/app/components/issues/sidebar.tsx
View File

@ -285,7 +285,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
user={user} user={user}
/> />
<div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden"> <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between px-5 pb-3">
<h4 className="text-sm font-medium"> <h4 className="text-sm font-medium">
{issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id} {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
</h4> </h4>
@ -327,7 +327,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="h-full w-full overflow-y-auto"> <div className="h-full w-full px-5 overflow-y-auto">
<div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}> <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
{showFirstSection && ( {showFirstSection && (
<div className="py-1"> <div className="py-1">

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -148,7 +148,7 @@ const IssueDetailsPage: NextPage = () => {
<div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5"> <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
<IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} /> <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
</div> </div>
<div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden"> <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 py-5 overflow-hidden">
<IssueDetailsSidebar <IssueDetailsSidebar
control={control} control={control}
issueDetail={issueDetails} issueDetail={issueDetails}