diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index 9f7b9cf439..6e6968f868 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/components/status_content.jsx @@ -108,11 +108,12 @@ class StatusContent extends PureComponent { const { status, onCollapsedToggle } = this.props; if (status.get('collapsed', null) === null && onCollapsedToggle) { const { collapsible, onClick } = this.props; + const text = node.querySelector(':scope > .status__content__text'); const collapsed = collapsible && onClick - && node.clientHeight > MAX_HEIGHT + && (node.clientHeight > MAX_HEIGHT || (text !== null && text.scrollWidth > text.clientWidth)) && status.get('spoiler_text').length === 0; onCollapsedToggle(collapsed); diff --git a/app/javascript/flavours/glitch/styles/mastodon/_variables.scss b/app/javascript/flavours/glitch/styles/mastodon/_variables.scss index d561f71454..7a947891d5 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/_variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/_variables.scss @@ -6,6 +6,9 @@ $backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); // Language codes that uses CJK fonts $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; +// Language codes that is written vertically +$vertical-lr-langs: mn-Mong; + // Variables for components $media-modal-media-max-width: 100%; diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss index ac501195b7..d3095fe372 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/components.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss @@ -1402,6 +1402,38 @@ body > [data-popper-placement] { } } +@each $lang in $vertical-lr-langs { + // writing-mode and width must be applied to a single element. When + // this element inherits a text direction that is opposite to its own, + // the start of this element's text is cut off. + + .status:not(.status--is-quote) + > .status__content + > .status__content__text:lang(#{$lang}), + .conversation + > .conversation__content + > .status__content + > .status__content__text: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 + } + + .autosuggest-textarea > .autosuggest-textarea__textarea:lang(#{$lang}) { + writing-mode: vertical-lr; + min-height: 209px; // writable + } + + .detailed-status > .status__content > .status__content__text:lang(#{$lang}) { + writing-mode: vertical-lr; + width: 100%; // detecting overflow + max-height: 50vh; + overflow-x: auto; + } +} + .status__content.status__content--collapsed { max-height: 20px * 15; // 15 lines is roughly above 500 characters }