mirror of
https://github.com/makeplane/plane
synced 2025-08-07 19:59:33 +00:00
[WEB-2511] fix: fix overlapping issues for headers globally (#5667)
* fixed only for spreadsheet * change package for global change * made global and ad hoc changes * fix border and z-index for intake and notifications header
This commit is contained in:
@@ -10,8 +10,8 @@ export interface IHeaderProperties {
|
||||
}
|
||||
export const headerStyle: IHeaderProperties = {
|
||||
[EHeaderVariant.PRIMARY]:
|
||||
"relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100",
|
||||
[EHeaderVariant.SECONDARY]: "!py-0 overflow-y-hidden border-b border-custom-border-200 justify-between",
|
||||
"relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 bg-custom-background-100 z-[18]",
|
||||
[EHeaderVariant.SECONDARY]: "!py-0 overflow-y-hidden border-b border-custom-border-200 justify-between bg-custom-background-100 z-[15]",
|
||||
[EHeaderVariant.TERNARY]: "flex flex-wrap justify-between py-2 border-b border-custom-border-200 gap-2 bg-custom-background-100 z-[12]",
|
||||
};
|
||||
export const minHeights: IHeaderProperties = {
|
||||
|
||||
@@ -23,7 +23,7 @@ const ProjectDraftIssuesPage = observer(() => {
|
||||
<>
|
||||
<PageHead title={pageTitle} />
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="gap-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm">
|
||||
<div className="gap-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm bg-custom-background-100 z-[12]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
|
||||
|
||||
@@ -14,8 +14,8 @@ export const AppHeader = (props: AppHeaderProps) => {
|
||||
const { header, mobileHeader } = props;
|
||||
|
||||
return (
|
||||
<div className="z-[15]">
|
||||
<Row className="h-[3.75rem] z-10 flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
|
||||
<div className="z-[18]">
|
||||
<Row className="h-[3.75rem] flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
|
||||
<div className="block bg-custom-sidebar-background-100 md:hidden">
|
||||
<SidebarHamburgerToggle />
|
||||
</div>
|
||||
|
||||
@@ -247,7 +247,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
/>
|
||||
</>
|
||||
|
||||
<Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2">
|
||||
<Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-custom-background-100 z-[15] border-b border-custom-border-200">
|
||||
<div className="flex items-center gap-4">
|
||||
{isNotificationEmbed && (
|
||||
<button onClick={embedRemoveCurrentNotification}>
|
||||
|
||||
@@ -83,7 +83,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
|
||||
<Header variant={EHeaderVariant.SECONDARY} className="justify-start">
|
||||
{isNotificationEmbed && (
|
||||
<button onClick={embedRemoveCurrentNotification}>
|
||||
<MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
|
||||
<MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200 mr-2" />
|
||||
</button>
|
||||
)}
|
||||
<PanelLeft
|
||||
@@ -93,7 +93,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
|
||||
isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex items-center gap-2 w-full bg-custom-background-100 z-[15]">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -77,7 +77,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-full overflow-hidden relative flex flex-col">
|
||||
<div className="flex-shrink-0 min-h-[50px] border-b border-custom-border-300">
|
||||
<div className="flex-shrink-0 min-h-[52px] z-[11]">
|
||||
<InboxIssueActionsHeader
|
||||
setIsMobileSidebar={setIsMobileSidebar}
|
||||
isMobileSidebar={isMobileSidebar}
|
||||
|
||||
Reference in New Issue
Block a user