matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicolium: a likely correct implementation of vertical posts

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-02-10 16:01:57 +01:00
parent de8ae5a949
commit 50342b12a2
2 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/pl-fe/src/components/status-content.tsx
View File

@ -95,7 +95,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
const [onlyEmoji, setOnlyEmoji] = useState(false);
const [lineClamp, setLineClamp] = useState(true);
const node = useRef<HTMLDivElement>(null);
const contentNode = useRef<HTMLDivElement>(null);
const spoilerNode = useRef<HTMLSpanElement>(null);
const { collapseStatuses, expandStatuses } = useStatusMetaActions();
@ -107,17 +107,17 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
const expanded = !withSpoiler || statusMeta.expanded || false;
const maybeSetCollapsed = (): void => {
if (!node.current) return;
if (!contentNode.current) return;
if (collapsable || preview) {
// 20px * x lines (+ 2px padding at the top)
setCollapsed(node.current.clientHeight >= (preview ? 82 : isQuote ? 202 : 282));
setCollapsed(contentNode.current.clientHeight >= (preview ? 82 : isQuote ? 202 : 282) || contentNode.current.scrollWidth > contentNode.current.clientWidth);
}
};
const maybeSetOnlyEmoji = (): void => {
if (!node.current) return;
const only = isOnlyEmoji(node.current, BIG_EMOJI_LIMIT, true);
if (!contentNode.current) return;
const only = isOnlyEmoji(contentNode.current, BIG_EMOJI_LIMIT, true);
if (only !== onlyEmoji) {
setOnlyEmoji(only);
@ -190,6 +190,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
'max-h-[202px]': collapsable && collapsed === null && isQuote,
'max-h-[82px]': collapsed === null && preview,
'leading-normal big-emoji': onlyEmoji,
'⁂-status-content__expanded': !collapsable,
}), [collapsed, onlyEmoji]);
const expandable = !displaySpoilers;
@ -268,7 +269,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
if (status.content) {
output.push(
<Markup
ref={node}
ref={contentNode}
tabIndex={0}
key='content'
className={className}

17
packages/pl-fe/src/styles/markup.scss
View File

@ -1,3 +1,5 @@
$vertical-lr-langs: mn-mong, mnmong;
[data-markup], [data-lexical-editor] {
@apply whitespace-pre-wrap;
@ -140,6 +142,21 @@
}
}
@each $lang in $vertical-lr-langs {
&[lang="#{$lang}"] {
writing-mode: vertical-lr;
width: 100%; // detecting overflow
max-width: calc(100% - mod(100%, 22px)); // avoid cut-offs
max-height: 209px; // roughly above 500 characters, readable
overflow-x: hidden; // read more
&.⁂-status-content__expanded {
max-width: unset;
max-height: 50vh;
overflow-x: auto;
}
}
}
}
/* User setting to underline links */