[Feature Request]: Larger search/URL bar

[4yman-0]

Guidelines

• I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• I have searched the documentation for information that matches the description of the feature request I want to file, without success.
• This issue contains only one feature request.

Problem Description

Space waste

Proposed Solution

Make search/URL bar (top of window) larger when there is enough space.

Alternatives Considered

only extend search bar when "Hide FreeTube Header Logo" is enabled

Issue Labels

visual improvement

Additional Information

There will be a lot of discussion ;)

[efb4f5ff-1298-471a-8973-3d47447115dc]

Space waste

IMO making something bigger because there is space unused does not sound like a good idea to me. This could also make the top bar appear overcrowded.

Like to hear opinions of the other members of the team

[4yman-0]

Here's how it looks like in 2k using DevTools Device toolbar.
A max of 440px is not good for all devices, At least there will be some information (URL/search for example) rather than an empty background. We can also add spacing to make it look nice.

[kommunarr]

I'm not opposed to increasing the max size & better responsive design. For reference, the search bar in Gmail Web maxes out at 720px but shrinks if the viewport width doesn't suffice. YT maxes out at 640px.

[4yman-0]

This is the window where increased the max to 720px and made grid repeat(3, 1fr)

Here is the CSS:

@media only screen and (width >= 961px) {
    .topNav[data-v-284c500a] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.middle[data-v-284c500a] {
    flex: 1;
    max-inline-size: 720px;
}

[kommunarr]

That looks good from the screenshot. I can assign you if you want to open the PR for this one.

[4yman-0]

It's in #5348 now!
but it has 1fr 720px 1fr instead.