github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2025-08-07 19:59:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WIKI-545] fix: shrinking headings in page table of contents #7404

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-07-14 16:30:19 +05:30
committed by GitHub
parent 7829e3adf5
commit 0af0e52275
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/core/components/pages/editor/editor-body.tsx
View File

@@ -188,10 +188,10 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
aria-label={t("page_navigation_pane.outline_floating_button")}
onClick={handleOpenNavigationPane}
>
<PageContentBrowser editorRef={editorRef} showOutline />
<PageContentBrowser className="overflow-y-auto" editorRef={editorRef} showOutline />
</div>
<div className="absolute top-0 right-0 opacity-0 translate-x-1/2 pointer-events-none group-hover/page-toc:opacity-100 group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:pointer-events-auto transition-all duration-300 w-52 max-h-[70vh] overflow-y-scroll vertical-scrollbar scrollbar-sm whitespace-nowrap bg-custom-background-90 p-4 rounded">
<PageContentBrowser editorRef={editorRef} />
<PageContentBrowser className="overflow-y-auto" editorRef={editorRef} />
</div>
</div>
</div>

4
apps/web/core/components/pages/editor/summary/content-browser.tsx
View File

@@ -48,7 +48,7 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
return (
<div
className={cn(
"h-full flex flex-col items-start gap-y-1 overflow-y-auto mt-2",
"h-full flex flex-col items-start gap-y-1 mt-2",
{
"gap-y-2": showOutline,
},
@@ -62,7 +62,7 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
return (
<div
key={`${marking.level}-${marking.sequence}`}
className="h-0.5 bg-custom-border-400 self-end rounded-sm"
className="flex-shrink-0 h-0.5 bg-custom-border-400 self-end rounded-sm"
style={{
width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
}}

2
apps/web/core/components/pages/editor/summary/heading-components.tsx
View File

@@ -8,7 +8,7 @@ export type THeadingComponentProps = {
};
const COMMON_CLASSNAME =
"w-full py-1 text-left font-medium text-custom-text-300 hover:text-custom-primary-100 truncate transition-colors";
"flex-shrink-0 w-full py-1 text-left font-medium text-custom-text-300 hover:text-custom-primary-100 truncate transition-colors";
export const OutlineHeading1 = ({ marking, onClick }: THeadingComponentProps) => (
<button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-sm pl-1")}>