Skip to content

Draft: Responsive UI Elements

Leon Vitanos requested to merge responsive-elements into master

This MR focuses on achieving responsiveness in UI elements according to the window size.

Grid View Enhancements (ExpandGridView & KeyNavigableListView):

  • Removed the obsolete property playCoverBorderWidth
  • Introduced the GridSizeHelper QML component, enabling dynamic cell dimensions for GridItem based on available content width.
  • Added the ExpandGridItemView QML component, which uses ExpandGridView with GridItem delegates.
  • Replaced gridItem_music/video/network properties from VLCStyle with titleHeight and subtitleHeight.
    • GridItem cellHeight, now properly takes into account the titleMargin
  • Implemented a dynamic gutter size between items based on the number of items per row.
  • Introduced maximum item-per-row limits (6 for videos, 10 for others) to align with popular streaming platforms designs.

Table View Enhancements (KeyNavigableTableView):

  • Columns are now resized instantly instead of relying on periodic window resizing intervals.
  • Properly positioned the contextButton.


  • Adjusted left margins for both grid and table views to maintain consistency. The left margin remains constant with a gradual shift from 16px to 24px when the window size is between 600 and 1000.

Known Issues/Not optimized:

  • Resizing the window, reloads/recreates a doubleShadow for each grid element.
Edited by Leon Vitanos

Merge request reports