From 50342b12a29a1baf4b0ebdf58e6c50900fc97f50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 10 Feb 2026 16:01:57 +0100
Subject: [PATCH] nicolium: a likely correct implementation of vertical posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../pl-fe/src/components/status-content.tsx     | 13 +++++++------
 packages/pl-fe/src/styles/markup.scss           | 17 +++++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index 50e8c27d0..8401cd922 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -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}
diff --git a/packages/pl-fe/src/styles/markup.scss b/packages/pl-fe/src/styles/markup.scss
index cf0b1e111..5881d9f35 100644
--- a/packages/pl-fe/src/styles/markup.scss
+++ b/packages/pl-fe/src/styles/markup.scss
@@ -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 */