Normalize margin at top of page

[MarmadileManteater]

Normalize margin at top of page

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other (visual consistency)

Description

The margin above the top of each view is not consistent. Sometimes, its narrow. Other times, it is wide. This PR aims to improve consistency so that the margin at the top is always the same.

Screenshots

before

after

before

after

Testing

Compare all the different variants of the top margin

1. Look at a view with a floating refresh widget
2. Look at a view without a floating refresh widget
3. Reduce window width to below 680
4. Look at a view with a floating refresh widget
5. Look at a view without a floating refresh widget
6. Close the banner
7. Look at a view with a floating refresh widget
8. Look at a view without a floating refresh widget

Desktop

• OS: Fedora Linux w/ hyprland 0.51
• OS Version: 42 (Workstation Edition) x86_64
• FreeTube version: 7749ee4

[PikachuEXE]

Is banner used outside of ftNotificationBanner?
If not ftNotificationBanner itself got margin already

[MarmadileManteater]

That is correct. Nice catch.

[PikachuEXE]

single banner tested

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

Tested with 2 banners and with this PR it looks a bit weird

Before:

VirtualBoxVM_HQmCcSvY1p.mp4

After:

VirtualBoxVM_nstpHHNVqa.mp4

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

Ugh cant get the blog banner to show up. Anyone know how to force the banner to show?

Edit: nvm found the answer #2300 (comment)

New blog banner
Testing:

1. yarn run dev
2. In the devtools: Application -> Local Storage -> http://localhost:9080
3. Delete lastAppWasRunning key
4. Close FreeTube
5. yarn run dev

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

I do think the spacing between the banners is still a bit much compared to the non mobile view. Also the spacing between the last banner and the space on the bottom seems a bit much

VirtualBoxVM_a0AgcQPh8P.mp4

[github-actions]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

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

#7040 (comment)

doesnt seem to work for me. Any advice to show the blog banner?

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

This doesnt look right, below 680

VirtualBoxVM_wNJ2QNEFbE.mp4

Normal view

[github-actions]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

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

Closing as it will be revisited in another PR