Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 6 commits into from
Sep 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b80c6e2
fixed only for spreadsheet
sharma01ketan Sep 17, 2024
e1a4b38
change package for global change
sharma01ketan Sep 18, 2024
ad39177
made global and ad hoc changes
sharma01ketan Sep 20, 2024
1db47ff
Merge branch 'preview' into fix/header-overlap
sharma01ketan Sep 20, 2024
e5d6052
fix border and z-index for intake and notifications header
sharma01ketan Sep 23, 2024
cc69261
Merge branch 'fix/header-overlap' of https://github.com/makeplane/pla…
sharma01ketan Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/ui/src/header/helper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/`)}
Expand Down
4 changes: 2 additions & 2 deletions web/core/components/core/app-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web/core/components/inbox/content/inbox-issue-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
4 changes: 2 additions & 2 deletions web/core/components/inbox/content/inbox-issue-mobile-header.tsx
View file
Open in desktop
Copy link
Contributor Author

@sharma01ketan sharma01ketan Sep 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mobile Header had improper spacing for icon.

Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion web/core/components/inbox/content/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down