[Bug]: Search Bar Off Center

deepspaceaxolotl commented 1 month ago

Guidelines

[X] I have encountered this bug in the latest release of FreeTube.
[X] I have encountered this bug in the official downloads of FreeTube.
[X] I have searched the issue tracker for open and closed issues that are similar to the bug report I want to file, without success.
[X] I have searched the documentation for information that matches the description of the bug I want to file, without success.
[X] This issue contains only one bug.

Describe the bug

The search bar at the top is neither centered within the entire window (due to the filter button on the right) or when the sidebar is taken into account, collapsed or expanded. This makes it feel visually unbalanced, more so when the sidebar is expanded.

Expected Behavior

The search bar should shift to be centered with the viewport excluding the sidebar and not have the filter button taken into account when centering it, as is more common in web design (example: Twitter's search bar during a search).

Issue Labels

visual bug

FreeTube Version

v0.21.3 Beta

Operating System Version

Windows 10 version 22H2

Installation Method

.exe

Primary API used

Local API

Last Known Working FreeTube Version (If Any)

No response

Additional Information

No response

Nightly Build

[ ] I have encountered this bug in the latest nightly build.

4yman-0 commented 1 month ago

Can you take a screenshot (snipping tool) ?

4yman-0 commented 1 month ago

I also found that:

Profile (Letter) picture and hamburger menu are not spaced equally.
spacing of freetube logo and filter button is unbalanced.
Sidebar padding is too big in English (IDK about other languages).

Maybe turn this into an issue?

4yman-0 commented 1 month ago

There's some overlap I think.

How it is *unbalanced* Vs How it should look like

deepspaceaxolotl commented 1 month ago

Here's a screenshot.

And a mockup of what I expect it to look like with the sidebar expanded.

Done with the following CSS in renderer.fa0c5ad3461a3e4f915d.css using Developer Tools, though the numbers would probably need tweaking and this has not been tested on smaller window sizes, so a different solution may be required.

@media only screen and (width >= 1122px) {
    .topNav[data-v-284c500a] {
        grid-template-columns: 1.8fr 720px 1fr;
    }
}

4yman-0 commented 1 month ago

When viewport is too large, use 1fr size 1fr.
When viewport is 1600px>width>1000px, use 1fr smaller_size .5fr (profile picture breaks)
When viewport is too small. use display flex.

absidue commented 1 month ago

Sidebar padding is too big in English (IDK about other languages).

It only looks like that because you aren't subscribed to any channels in your screenshot and the English labels take up a lot less space than the ones in other languages.

4yman-0 commented 1 month ago

I don't think moving search bar with sidebar is a good idea

deepspaceaxolotl commented 3 weeks ago

Why not?

It feels more in line with how search bars work on websites with sidebars, in my experience.

FreeTubeApp / FreeTube