From aaca78da78909dd5a23df3e70de07b838eaf4a0e Mon Sep 17 00:00:00 2001
From: nyura123dev <58617294+nyura123dev@users.noreply.github.com>
Date: Thu, 17 Nov 2022 01:54:43 -0600
Subject: [PATCH] Fix safari explore disappearing tabs (#20917)

* fix disappearing Explore tabs on Safari

* fix lint

Co-authored-by: nyura <nyura@hidden.com>
---
 .../mastodon/features/explore/index.js        | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/javascript/mastodon/features/explore/index.js b/app/javascript/mastodon/features/explore/index.js
index 552def142d..286170c9ff 100644
--- a/app/javascript/mastodon/features/explore/index.js
+++ b/app/javascript/mastodon/features/explore/index.js
@@ -24,6 +24,16 @@ const mapStateToProps = state => ({
   isSearching: state.getIn(['search', 'submitted']) || !showTrends,
 });
 
+// Fix strange bug on Safari where <span> (rendered by FormattedMessage) disappears
+// after clicking around Explore top bar (issue #20885).
+// Removing width=100% from <a> also fixes it, as well as replacing <span> with <div>
+// We're choosing to wrap span with div to keep the changes local only to this tool bar.
+const WrapFormattedMessage = ({ children, ...props }) => <div><FormattedMessage {...props}>{children}</FormattedMessage></div>;
+WrapFormattedMessage.propTypes = {
+  children: PropTypes.any,
+};
+
+
 export default @connect(mapStateToProps)
 @injectIntl
 class Explore extends React.PureComponent {
@@ -47,7 +57,7 @@ class Explore extends React.PureComponent {
     this.column = c;
   }
 
-  render () {
+  render() {
     const { intl, multiColumn, isSearching } = this.props;
     const { signedIn } = this.context.identity;
 
@@ -70,10 +80,10 @@ class Explore extends React.PureComponent {
           ) : (
             <React.Fragment>
               <div className='account__section-headline'>
-                <NavLink exact to='/explore'><FormattedMessage id='explore.trending_statuses' defaultMessage='Posts' /></NavLink>
-                <NavLink exact to='/explore/tags'><FormattedMessage id='explore.trending_tags' defaultMessage='Hashtags' /></NavLink>
-                <NavLink exact to='/explore/links'><FormattedMessage id='explore.trending_links' defaultMessage='News' /></NavLink>
-                {signedIn && <NavLink exact to='/explore/suggestions'><FormattedMessage id='explore.suggested_follows' defaultMessage='For you' /></NavLink>}
+                <NavLink exact to='/explore'><WrapFormattedMessage id='explore.trending_statuses' defaultMessage='Posts' /></NavLink>
+                <NavLink exact to='/explore/tags'><WrapFormattedMessage id='explore.trending_tags' defaultMessage='Hashtags' /></NavLink>
+                <NavLink exact to='/explore/links'><WrapFormattedMessage id='explore.trending_links' defaultMessage='News' /></NavLink>
+                {signedIn && <NavLink exact to='/explore/suggestions'><WrapFormattedMessage id='explore.suggested_follows' defaultMessage='For you' /></NavLink>}
               </div>
 
               <Switch>