Draft: Address Layout Consistency Issues

This MR focuses on achieving concistency in layouts (grid and table view)

Added the ViewHeader QML component, to avoid code duplication, and maintain consistent padding across all layouts. This component provides a title for layouts and includes a "See All" button when necessary. As a result, the BrowseDeviceHeader component has been removed.

Example of a padding inconsisency

"See All" missalignment in the previous BrowseDeviceHeader

Introduced a title header to all Video and Music views (+discovery).

Example before & after

Adjusted the playlistview topPadding to match the layout's padding for uniformity.

Before

For the table view at the Video page, the ListView.InlineHeader is now only used when we are at the Video page, and there exist recentVideos (basically titles can be scrollable when there are 2 vertically aligned tables)

before & after of seeing all recent videos page

Standardized spacing between vertically-aligned grid and list layouts, resolving inconsistencies in spacing between grid and list layouts on the Videos and Browse pages.

Example grid/list spacing difference:

Increased top padding of the first layout's title by 8px, and the bottom padding of every layout's title by 4px

Example grid&list padding, before&after:

Reasoning: A comparison with other apps/websites

Title font size seems OK.

Top padding seems to be too low

Bottom padding seems to be too low

Spacing between vertically-aligned layouts seems OK

TO-DO:

• Make layout's title clickable when "See All" button is visible