FEATURE: show unread post indicator on mobile (#25421)

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;
   }

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;
+  }
+}

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;

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 {