Building a Category Bar with Auto-Sizing CSS and JavaScript

A category navigation bar needs to handle any number of categories gracefully. Here's how I built an auto-sizing category bar for TrendVidStream that adapts from full labels to compact chips to minimal icons. The Design Problem The category bar shows trending video categories: Music, Gaming, Sports, Entertainment, etc. The number of active categories varies by region. On desktop, we want wrapped chips. On mobile, a horizontal scroll. HTML Structure <nav class= "vw-catbar" id= "catbar" aria-label= "Video Categories" > <a href= "/category/music" class= "chip active" > Music </a> <a href= "/category/gaming" class= "chip" > Gaming </a> <a href= "/category/sports" class= "chip" > Sports </a> <a href= "/category/entertainment" class= "chip" > Entertainment </a> <a href= "/category/news" class= "chip" > News & Politics </a> <a href= "/category/education" class= "chip" > Education </a> <a href= "/category/science" class= "chip" > Science & Tech </a> <a href= "/category/comedy" class= "chip" >