Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 22 additions & 0 deletions app/assets/css/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -197,3 +197,25 @@
.medium-zoom-image--opened {
pointer-events: auto
}

/* md-editor-v3 ships `word-break: break-all` on its preview containers, which splits ordinary
words mid-character instead of wrapping at spaces. Restore normal word wrapping, keeping
`overflow-wrap` as a safety net so a genuinely unbreakable run (a long URL) still breaks
rather than overflowing its column.

The doubled class is deliberate. The library's CSS ships in a lazy component chunk, so
source order cannot decide the winner and the reset has to out-rank it on specificity. Two
classes also beat the theme's `div.default-theme table tr th, ... td`, which sets the legacy
`word-wrap` alias on cells — that rule is why `th`/`td` are listed explicitly, since it
overrides the value the cells would otherwise inherit from the container.

`anywhere` rather than `break-word` is load-bearing. The library renders links as
`display: inline-flex`, so a bare URL is a flex item, and a flex item will not shrink below
its min-content width. Only `anywhere` reduces min-content; under `break-word` a long link
keeps its full width and overflows its column instead of wrapping. */
.md-editor-preview.md-editor-preview,
.md-editor-html.md-editor-html,
.md-editor-preview.md-editor-preview :is(h1, h2, h3, h4, h5, h6, th, td) {
word-break: normal;
overflow-wrap: anywhere;
}
2 changes: 1 addition & 1 deletion app/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ async function handleVote(post: PostListItem) {
</div>

<!-- Excerpt -->
<p class="text-sm text-muted-foreground line-clamp-2 break-all">
<p class="text-sm text-muted-foreground line-clamp-2 break-words">
{{ p.excerpt }}
</p>

Expand Down
Loading