From 6cde3dd08b737f154ff83af3fe903294f7bcca5b Mon Sep 17 00:00:00 2001
From: prplecake <me@prplecake.com>
Date: Thu, 22 Dec 2022 08:18:02 -0600
Subject: [PATCH] Wraps status timestamps in a `div` (#2038)

* Wraps status timestamps in a `div`

Fixes #1985

This wraps the status timestamp in a `div` to reduce the clickable
target size of the link. The `div` gets a `margin: 0 0 0 auto` to stick
it to the right margin of the status.

* Update app/javascript/flavours/glitch/styles/components/status.scss

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/status_action_bar.js       | 8 +++++---
 .../flavours/glitch/styles/components/status.scss         | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 7949b2db3b..3a18dff21c 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -328,9 +328,11 @@ class StatusActionBar extends ImmutablePureComponent {
           />
         </div>
 
-        <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
-          <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
-        </a>
+        <div className='status__action-bar-timestamp'>
+          <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
+            <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
+          </a>
+        </div>
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 39184ba7a0..0f23c7d4d9 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -590,6 +590,11 @@
   width: 23.15px;
 }
 
+.status__action-bar-timestamp {
+  flex-grow: 1;
+  text-align: end;
+}
+
 .detailed-status__action-bar-dropdown {
   flex: 1 1 auto;
   display: flex;