fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-22 14:15:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid nested button

Browse source
This commit is contained in:
Christian Schmidt 2024-09-28 16:16:32 +02:00
parent 7c3834a8c8
commit 12cc731a37
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/mastodon/features/compose/components/search.jsx
View file

@ -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 })}>
<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 className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
</button>
<button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
</div>
)) : (
<div className='search__popout__menu__message'>
<FormattedMessage id='search.no_recent_searches' defaultMessage='No recent searches' />

29
app/javascript/styles/mastodon/components.scss
View file

@ -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;
}