diff options
| author | prplecake <me@prplecake.com> | 2022-12-22 08:18:02 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-12-22 15:18:02 +0100 |
| commit | 6cde3dd08b737f154ff83af3fe903294f7bcca5b (patch) | |
| tree | 9be5e77b2689753dfd4d19388575c499e6dcf549 | |
| parent | db420fb7795feee23bd940e47aa2cf8c04e4de5b (diff) | |
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>
| -rw-r--r-- | app/javascript/flavours/glitch/components/status_action_bar.js | 8 | ||||
| -rw-r--r-- | app/javascript/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 7949b2db3..3a18dff21 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 39184ba7a..0f23c7d4d 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; |