binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2511] fix: fix overlapping issues for headers globally (#5667)

Browse source 
* 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:
Ketan Sharma 2024-09-23 16:03:56 +05:30 • committed by GitHub
parent 83b83326c5
commit f49a2aa9e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/ui/src/header/helper.tsx
View file

@ -10,8 +10,8 @@ export interface IHeaderProperties {
} }
export const headerStyle: IHeaderProperties = { export const headerStyle: IHeaderProperties = {
[EHeaderVariant.PRIMARY]: [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", "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", [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]", [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 = { export const minHeights: IHeaderProperties = {

2
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
View file

@ -23,7 +23,7 @@ const ProjectDraftIssuesPage = observer(() => {
<> <>
<PageHead title={pageTitle} /> <PageHead title={pageTitle} />
<div className="flex h-full w-full flex-col"> <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 <button
type="button" type="button"
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)} onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}

4
web/core/components/core/app-header.tsx
View file

@ -14,8 +14,8 @@ export const AppHeader = (props: AppHeaderProps) => {
const { header, mobileHeader } = props; const { header, mobileHeader } = props;
return ( return (
<div className="z-[15]"> <div className="z-[18]">
<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"> <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"> <div className="block bg-custom-sidebar-background-100 md:hidden">
<SidebarHamburgerToggle /> <SidebarHamburgerToggle />
</div> </div>

2
web/core/components/inbox/content/inbox-issue-header.tsx
View file

@ -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"> <div className="flex items-center gap-4">
{isNotificationEmbed && ( {isNotificationEmbed && (
<button onClick={embedRemoveCurrentNotification}> <button onClick={embedRemoveCurrentNotification}>

4
web/core/components/inbox/content/inbox-issue-mobile-header.tsx
View file

@ -83,7 +83,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
<Header variant={EHeaderVariant.SECONDARY} className="justify-start"> <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
{isNotificationEmbed && ( {isNotificationEmbed && (
<button onClick={embedRemoveCurrentNotification}> <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> </button>
)} )}
<PanelLeft <PanelLeft
@ -93,7 +93,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200" 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"> <div className="flex items-center gap-x-2">
<button <button
type="button" type="button"

2
web/core/components/inbox/content/root.tsx
View file

@ -77,7 +77,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
return ( return (
<> <>
<div className="w-full h-full overflow-hidden relative flex flex-col"> <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 <InboxIssueActionsHeader
setIsMobileSidebar={setIsMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
isMobileSidebar={isMobileSidebar} isMobileSidebar={isMobileSidebar}