Add more data-read-more UIs

src/components/status.css

@@ -93,6 +93,34 @@
   text-decoration: none;
   color: var(--text-color);
 }
+.status-card-link:not(.status-card-link .status-card-link):has(.truncated) {
+  position: relative;
+
+  &:after {
+    content: attr(data-read-more);
+    line-height: 1;
+    display: inline-block;
+    position: absolute;
+    --inset-offset: 16px;
+    inset-block-end: var(--inset-offset);
+    inset-inline-end: var(--inset-offset);
+    color: var(--link-color);
+    background-color: var(--bg-faded-blur-color);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--outline-color);
+    padding: 0.5em 0.75em;
+    border-radius: 10em;
+    font-size: 90%;
+    white-space: nowrap;
+    transition: all 0.2s ease-out;
+  }
+
+  &:is(:hover, :focus):after {
+    border-color: var(--link-color);
+    background-color: var(--bg-color);
+    transform: translate(2px, 0);
+  }
+}
 .status-card-link:is(:hover, :focus) .status-card {
   border-color: var(--outline-hover-color);
   box-shadow: inset 0 0 0 4px var(--bg-faded-blur-color);
@@ -131,11 +159,13 @@
   :is(.content, .poll, .media-container) {
   max-height: 80px !important;
 }
-.status-card :is(.content, .poll) {
+.status-card :is(.content.truncated, .poll, .media-container.truncated) {
   font-size: inherit !important;
   mask-image: linear-gradient(to bottom, #000 80px, transparent);
 }
-.status.small .status-card :is(.content, .poll) {
+.status.small
+  .status-card
+  :is(.content.truncated, .poll, .media-container.truncated) {
   mask-image: linear-gradient(to bottom, #000 40px, transparent);
 }
 .status-card .card {

src/components/status.jsx

@@ -321,6 +321,7 @@ function Status({
 
   const spoilerContentRef = useTruncated();
   const contentRef = useTruncated();
+  const mediaContainerRef = useTruncated();
   const readMoreText = 'Read more →';
 
   const statusRef = useRef(null);
@@ -1248,6 +1249,7 @@ function Status({
           )}
           {!!mediaAttachments.length && (
             <div
+              ref={mediaContainerRef}
               class={`media-container media-eq${mediaAttachments.length} ${
                 mediaAttachments.length > 2 ? 'media-gt2' : ''
               } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
@@ -2185,6 +2187,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
         key={q.instance + q.id}
         to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}
         class="status-card-link"
+        data-read-more="Read more →"
       >
         <Status
           statusID={q.id}