8000 Wrap headings on mobile ToC by hmacr · Pull Request #8531 · outline/outline · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Wrap headings on mobile ToC #8531

New issue < 8000 /summary>

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

Jump to bottom
Merged
merged 2 commits into from
Feb 22, 2025
Merged

Wrap headings on mobile ToC #8531

merged 2 commits into from
Feb 22, 2025

Conversation

hmacr
Copy link
Collaborator
@hmacr hmacr commented Feb 22, 2025

Closes #8526

@hmacr hmacr requested a review from tommoor February 22, 2025 03:00
@tommoor
Copy link
Member
tommoor commented Feb 22, 2025

Not sure here, I don't think there is anything specific about TOC that warrants special treatment? Like just apply truncation to all the menus on mobile if we want to go that route? 🤔

@hmacr
Copy link
Collaborator Author
hmacr commented Feb 22, 2025 •
edited
Loading

It was one of the options I considered - there's an existing ellipsis style in the menu item, but it doesn't work due to flexbox incompatibility.
There's a few places where the Title's children is not a simple text node, for e.g.

outline/app/editor/components/SuggestionsMenuItem.tsx

Lines 52 to 62 in 87fcf35

<MenuItem
ref={ref}
active={selected}
onClick={disabled ? undefined : onClick}
icon={icon}
>
{title}
{subtitle && <Subtitle $active={selected}>&middot; {subtitle}</Subtitle>}
{shortcut && <Shortcut $active={selected}>{shortcut}</Shortcut>}
</MenuItem>
);

This will require a bit of refactor throughout the app to truncate just the title text - worth doing it now? 🤔

@tommoor
Copy link
Member
tommoor commented Feb 22, 2025

Fair enough, not worth it now. Might be better if it wrapped here as you can't really access the elided text on mobile?

@hmacr hmacr changed the title Truncate heading overflow on mobile ToC Wrap headings on mobile ToC Feb 22, 2025
@tommoor tommoor merged commit ae2fafa into main Feb 22, 2025
11 checks passed
@hmacr hmacr deleted the hmacr/8526-truncate-headings-mobile-toc branch February 24, 2025 15:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tommoor tommoor tommoor approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The "no headings" TOC advisory cut off in mobile
2 participants
@hmacr @tommoor
0