FreeTubeApp
[Bug]: Search Bar Off Center
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.
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?
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;
}
}
- 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.
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.
Why not?
It feels more in line with how search bars work on websites with sidebars, in my experience.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I don't think #5773 fixes this issue, it's still off-center in the same way. How do I reopen this?
Could you elaborate some more on why you think it didnt solve this.
The search bar is off-center in the exact same way as I described in the issue. It takes into account the filter button to the side when centered, which results in the actual search bar being off-center, and it doesn't recenter itself when the viewport becomes narrower when the sidebar is expanded, contrary to expectations set by most websites I know of with a search bar and the kind of sidebar FreeTube has. (Hope my tone doesn't come off as condescending, just want to clarify that the width of the search bar wasn't really a factor.)
Sorry for the late reply. Not quite sure if this is what you wanted, but this shows the search bar not moving right to be centered within the viewport (minus the sidebar) when the sidebar is expanded, and that it isn't centered with the window to begin with due to the filter button.
Before reopening this i would like @kommunarr thoughts on this. I do not quite understand the issue from looking at the provided gif
The part about the sidebar being expanded I am not so sure on, as the top nav and side navs are fully separate, so expanding the side nav should have no bearing on the top nav, same as in YT. The main point they're getting at here is sensible: this whole box area containing the search bar + filter button is centered, but visually you would expect the search bar itself to be centered, thus making it appear off-center by 30px to the left. Possible fix would be to have the filter button not take up space in the sizing calculations and just use a right margin of the same size to prevent it from being clipped into.
A separate and perhaps more major problem is that around the 1130px breakpoint, the space to the left of the search bar stops shrinking as you decrease the viewport width, thus causing it to be chilling very off-center until you reach the 680px mobile breakpoint. YT handles this by shrinking the search bar, but I think a better way to do it (since we don't have to care about branding) would be to just remove the FreeTube logo between these two breakpoints. But nobody seems to complain about that from what I've seen, so we either have very few tablet users or people seem to think it's just a stylistic choice on our part (eh).
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 7 days.