[WIP] UI size notes - home-assistant/frontend GitHub Wiki

Sidebar:

  • width: 256px
  • collapses at window width < 870px

Statecards:

  • column width: 300px (including 8px margin)
  • column max-width: 500px (600px on screens < 600px wide)
  • gutter: 8px
  • margins: 8px
  • card width: 292px Above sizes should allow 2 columns to show until and after sidebar collapse. (so it won't switch between 1, 2 or 3 columns when the sidebar auto-collapses) For this the column min-width should be between: (870-8)/3 = 288px and (870-256-8)/2 = 303px