Possibility to move Search item into the miniflux menu?

[jum]

• [X] I have read this document: https://miniflux.app/opinionated.html#feature-request

The new Search menu takes up quite some screen real estate on a narrow phone screen. It is also quite easy to touch accidentally when I am reaching for the Miniflux menu itself. I myself am using search rather seldomly, but I use the Miniflux menu quite often, for example to switch categories. Would it be possible to add an option to move the search item to the main Miniflux menu?

[elcste]

@jum I agree and added a horrible hack to my custom CSS to move the search button to the right side of the same line as the logo menu:

.search details > summary {margin: -33.25px 5px 0 330px}

Those numbers put it in a good spot on my phone (with my other custom CSS), but you'll probably have to play with them to get it to the right place for you.

Edit: To limit to mobile displays, you can do something like

@media (max-width:620px) {
    .search details > summary {
        margin: -33.25px 5px 0 330px
    }
}

[wackydoo]

The new search location looks very bad on my phone. Takes up too much real estate. Please move to the menu. I seldom use search so it can be hidden.

Also, if I use the @elcste custom CSS, then the search menu is in a bad location when I view from a desktop browser.

[tjeerdhans]

@wackydoo I use this custom css which puts the search menu at the far right on desktop and mobile:

.search {
  position: absolute;
  top: 3px;
  right: 5px;
}

.search-summary {
  margin-inline: unset;
  margin-inline-start: auto;
}

Additionally, I use the following to gain a little more screen real estate:

.header {
  margin-bottom: 0px;
}

[fguillot]

This change was made in this PR https://github.com/miniflux/v2/pull/2322 and also discussed here: https://github.com/miniflux/v2/pull/2322#issuecomment-1935293297

Citing @krvpb024 (The contributor that made all these accessibility improvements):

This change is because in the previous version, the search form was inside the nav element. And it was hidden by display: none; by default in the mobile layout. Screen readers won't announce the element if the value of display in CSS is none. Not hiding it by default can make search landmark more discoverable to screen reader users

link to comment

This change also bother me a little bit, and I'm thinking about moving the search form to its own page. That should solve the situation for everyone and simplify the code base as well.