diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index d126e75118f..a4151b96166 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -340,10 +340,11 @@ textarea { } .wrap { + --d-wrap-padding-h: 10px; max-width: var(--d-max-width); margin-right: auto; margin-left: auto; - padding: 0 10px; + padding: 0 var(--d-wrap-padding-h); .contents { position: relative; } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 52f70950674..af0cb0a0bbd 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -1741,3 +1741,17 @@ html.discourse-no-touch .fullscreen-table-wrapper:hover { opacity: 100%; } } + +.read-state { + position: absolute; + // We use absolute positioning here because we want it to display in the padding + align-self: center; + color: var(--tertiary-medium); + right: 0; + font-size: 0.571em; + &.read { + visibility: hidden; + opacity: 0; + transition: visibility 1s, opacity ease-out 1s; + } +} diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index e4135aca30e..a65a294faaa 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -636,21 +636,6 @@ span.highlighted { color: var(--primary-low-mid); } -.read-state { - position: absolute; - // We use absolute positioning here because we want it to display in the padding - align-self: center; - color: var(--tertiary-medium); - right: 0; - font-size: 0.571em; -} - -.read-state.read { - visibility: hidden; - opacity: 0; - transition: visibility 1s, opacity ease-out 1s; -} - .topic-post.sticky-avatar { .topic-avatar { position: sticky; diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 04c1641e858..716123cc9a6 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -384,7 +384,16 @@ span.highlighted { } .read-state { - display: none; + // contained within the padding to prevent vertical overflow + max-width: var(--d-wrap-padding-h); + right: calc(var(--d-wrap-padding-h) * -1); + font-size: var(--font-down-2); + overflow: hidden; + margin-top: 0.15em; + + svg { + right: calc(var(--d-wrap-padding-h) / 2.5 * -1); + } } .post-notice {