vhad/plane
1
0
Fork 0
mirror of https://github.com/gosticks/plane.git synced 2025-10-16 12:45:33 +00:00
Code Issues Actions 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 5 deletions
Show Stats 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")} aria-label={t("page_navigation_pane.outline_floating_button")}
onClick={handleOpenNavigationPane} onClick={handleOpenNavigationPane}
> >
<PageContentBrowser editorRef={editorRef} showOutline /> <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} showOutline />
</div> </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"> <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> </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 ( return (
<div <div
className={cn( 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, "gap-y-2": showOutline,
}, },
@ -62,7 +62,7 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
return ( return (
<div <div
key={`${marking.level}-${marking.sequence}`} 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={{ style={{
width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px", 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 = 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) => ( export const OutlineHeading1 = ({ marking, onClick }: THeadingComponentProps) => (
<button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-sm pl-1")}> <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-sm pl-1")}>