From 7c3834a8c8fbd32c2bd71c1f44531bf4984207b2 Mon Sep 17 00:00:00 2001
From: Christian Schmidt <github@chsc.dk>
Date: Sat, 28 Sep 2024 16:16:14 +0200
Subject: [PATCH 1/4] Invalid prop type

---
 .../mastodon/features/explore/components/search_section.jsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/features/explore/components/search_section.jsx b/app/javascript/mastodon/features/explore/components/search_section.jsx
index c84e3f7cef..b06da9d9d3 100644
--- a/app/javascript/mastodon/features/explore/components/search_section.jsx
+++ b/app/javascript/mastodon/features/explore/components/search_section.jsx
@@ -16,5 +16,5 @@ export const SearchSection = ({ title, onClickMore, children }) => (
 SearchSection.propTypes = {
   title: PropTypes.node.isRequired,
   onClickMore: PropTypes.func,
-  children: PropTypes.children,
-};
\ No newline at end of file
+  children: PropTypes.node,
+};

From 12cc731a374d6fbad6368437e853e2e4cf37d7c5 Mon Sep 17 00:00:00 2001
From: Christian Schmidt <github@chsc.dk>
Date: Sat, 28 Sep 2024 16:16:32 +0200
Subject: [PATCH 2/4] Avoid nested button

---
 .../features/compose/components/search.jsx    |  8 +++--
 .../styles/mastodon/components.scss           | 29 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/search.jsx b/app/javascript/mastodon/features/compose/components/search.jsx
index 7fa7ad248b..a38e71864a 100644
--- a/app/javascript/mastodon/features/compose/components/search.jsx
+++ b/app/javascript/mastodon/features/compose/components/search.jsx
@@ -346,10 +346,12 @@ class Search extends PureComponent {
 
               <div className='search__popout__menu'>
                 {recent.size > 0 ? this._getOptions().map(({ label, key, action, forget }, i) => (
-                  <button key={key} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
-                    <span>{label}</span>
+                  <div key={key} className='search__popout__menu__item search__popout__menu__item--flex'>
+                    <button onMouseDown={action} className={classNames({ selected: selectedOption === i })}>
+                      <span>{label}</span>
+                    </button>
                     <button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
-                  </button>
+                  </div>
                 )) : (
                   <div className='search__popout__menu__message'>
                     <FormattedMessage id='search.no_recent_searches' defaultMessage='No recent searches' />
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 14de6e6818..9b9a11cdc5 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5589,26 +5589,33 @@ a.status-card {
 
       &__item {
         display: block;
-        box-sizing: border-box;
         width: 100%;
-        border: 0;
-        font: inherit;
-        background: transparent;
-        color: $darker-text-color;
-        padding: 10px;
-        cursor: pointer;
         border-radius: 4px;
-        text-align: start;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
 
         &--flex {
           display: flex;
           justify-content: space-between;
         }
 
+        &:is(button),
+        button {
+          flex: 1;
+          box-sizing: border-box;
+          border: 0;
+          font: inherit;
+          background: transparent;
+          color: $darker-text-color;
+          padding: 10px;
+          cursor: pointer;
+          text-align: start;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
         .icon-button {
+          flex: 0;
+          padding: 10px 20px 10px 10px;
           transition: none;
         }
 

From 3e1f11fa92e8c659997d403ef872a9d27280f22f Mon Sep 17 00:00:00 2001
From: Christian Schmidt <github@chsc.dk>
Date: Thu, 21 Nov 2024 21:12:30 +0100
Subject: [PATCH 3/4] Pixel-perfect status quo

---
 app/javascript/styles/mastodon/components.scss | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 1ab5cb845d..92afe51ef3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5617,11 +5617,18 @@ a.status-card {
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
+
+          &:hover,
+          &:focus,
+          &:active,
+          &.selected {
+            color: $primary-text-color;
+          }
         }
 
         .icon-button {
           flex: 0;
-          padding: 10px 20px 10px 10px;
+          padding: 10px 19px 10px 10px;
           transition: none;
         }
 
@@ -5630,11 +5637,6 @@ a.status-card {
         &:active,
         &.selected {
           background: $ui-highlight-color;
-          color: $primary-text-color;
-
-          .icon-button {
-            color: $primary-text-color;
-          }
         }
 
         mark {

From 1ecf2b88dc013ec661904ef5189514b2348493e6 Mon Sep 17 00:00:00 2001
From: Christian Schmidt <github@chsc.dk>
Date: Fri, 20 Dec 2024 17:34:49 +0100
Subject: [PATCH 4/4] Lint

---
 .../mastodon/features/compose/components/search.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/search.tsx b/app/javascript/mastodon/features/compose/components/search.tsx
index 8d990db002..c58d57799b 100644
--- a/app/javascript/mastodon/features/compose/components/search.tsx
+++ b/app/javascript/mastodon/features/compose/components/search.tsx
@@ -497,8 +497,14 @@ export const Search: React.FC<{
             <div className='search__popout__menu'>
               {recentOptions.length > 0 ? (
                 recentOptions.map(({ label, key, action, forget }, i) => (
-                  <div key={key} className='search__popout__menu__item search__popout__menu__item--flex'>
-                    <button onMouseDown={action} className={classNames({ selected: selectedOption === i })}>
+                  <div
+                    key={key}
+                    className='search__popout__menu__item search__popout__menu__item--flex'
+                  >
+                    <button
+                      onMouseDown={action}
+                      className={classNames({ selected: selectedOption === i })}
+                    >
                       <span>{label}</span>
                     </button>
                     <button className='icon-button' onMouseDown={forget}>