fix: itemsPerRow not working for media browse, only for favorites

- Use gap: 8px on container instead of margin on children
- Fix inconsistent indentation in HTML template
- Add comments explaining magic numbers and conditions
- Update sync-upstream.sh to match

Author: punxaphil

.github/copilot-instructions.md

@@ -41,6 +41,13 @@ When adding a new configuration option, update ALL of the following:
   - For readme stuff, use ONLY_SONOS_CARD, ONLY_SONOS_CARD_END, and ONLY_SONOS_CARD_START to show/hide docs for different cards. 
   - Study the README.md and the create_dist script for more information. 
 
+# Upstream folder
+- The `src/upstream/` folder contains code synced from Home Assistant frontend via `scripts/sync-upstream.sh`.
+- **AVOID modifying files in `src/upstream/` directly** - every change requires updating the sync script to reapply patches.
+- Instead, extract custom logic to `src/utils/` or other folders outside upstream.
+- Pass data/callbacks from the component that uses upstream code (e.g., `media-browser.ts` → `ha-media-player-browse.ts`).
+- If upstream changes ARE necessary, also update `scripts/sync-upstream.sh` with the corresponding sed commands to reapply the change after syncing.
+
 # Deployment
 - ALWAYS run `npm run deploy` after implementing any code changes (it builds automatically, don't build separately)
 - On first run, you'll be prompted to create a long-lived access token in HA (Profile → Long-Lived Access Tokens)

scripts/sync-upstream.sh

@@ -94,6 +94,47 @@ sed -i '' '/public preferredLayout.*auto/a\
   @property({ type: Number }) public itemsPerRow?: number;
 ' "$UPSTREAM_DIR/ha-media-player-browse.ts"
 
+# Add flex-grid rendering for custom itemsPerRow (percentage-based, adapts to container width)
+echo "Adding flex-grid rendering for custom itemsPerRow..."
+sed -i '' "/: this.hass.localize('ui.components.media-browser.no_items')}/a\\
+\\
+                        \`\\
+              : this.itemsPerRow !== 4 // 4 is default, handled by lit-virtualizer below\\
+                ? html\`\\
+                    <div class=\"children flex-grid\" style=\"--items-per-row: \${this.itemsPerRow}\">\\
+                      \${children.map((child) => this._renderGridItem(child))}\\
+                    </div>\\
+                    \${currentItem.not_shown\\
+                      ? html\`\\
+                          <div class=\"grid not-shown\">\\
+                            <div class=\"title\">\\
+                              \${this.hass.localize('ui.components.media-browser.not_shown', {\\
+                                count: currentItem.not_shown,\\
+                              })}\\
+                            </div>\\
+                          </div>\\
+                        \`\\
+                      : ''}\\
+                  \`
+" "$UPSTREAM_DIR/ha-media-player-browse.ts"
+
+# Add flex-grid CSS styles
+echo "Adding flex-grid CSS..."
+sed -i '' '/padding: 16px;$/a\
+\        }\
+\
+\        div.children.flex-grid {\
+\          display: flex;\
+\          flex-wrap: wrap;\
+\          padding: 4px;\
+\          gap: 8px;\
+\        }\
+\
+\        .flex-grid .child {\
+\          /* 8px gap between items, so subtract gap*(n-1)/n ≈ gap for simplicity */\
+\          width: calc(100% / var(--items-per-row) - 8px);
+' "$UPSTREAM_DIR/ha-media-player-browse.ts"
+
 # Remove type import of LitVirtualizer (causes duplicate registration)
 echo "Fixing LitVirtualizer import..."
 sed -i '' '/^import type { LitVirtualizer }/d' "$UPSTREAM_DIR/ha-media-player-browse.ts"

src/upstream/ha-media-player-browse.ts

@@ -469,6 +469,23 @@ export class HaMediaPlayerBrowse extends LitElement {
                   : this.hass.localize('ui.components.media-browser.no_items')}
                           </div>
                         `
+              : this.itemsPerRow !== 4 // 4 is default, handled by lit-virtualizer below
+                ? html`
+                    <div class="children flex-grid" style="--items-per-row: ${this.itemsPerRow}">
+                      ${children.map((child) => this._renderGridItem(child))}
+                    </div>
+                    ${currentItem.not_shown
+                      ? html`
+                          <div class="grid not-shown">
+                            <div class="title">
+                              ${this.hass.localize('ui.components.media-browser.not_shown', {
+                                count: currentItem.not_shown,
+                              })}
+                            </div>
+                          </div>
+                        `
+                      : ''}
+                  `
               : this.preferredLayout === 'grid' ||
                 (this.preferredLayout === 'auto' && childrenMediaClass.layout === 'grid')
                 ? html`
@@ -1006,6 +1023,18 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 16px;
         }
 
+        div.children.flex-grid {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 4px;
+          gap: 8px;
+        }
+
+        .flex-grid .child {
+          /* 8px gap between items, so subtract gap*(n-1)/n ≈ gap for simplicity */
+          width: calc(100% / var(--items-per-row) - 8px);
+        }
+
         :host([dialog]) .children {
           grid-template-columns: repeat(auto-fit, minmax(var(--media-browse-item-size, 175px), 0.33fr));
         }

src/utils/media-browse-utils.ts

@@ -65,39 +65,11 @@ export function filterOutIgnoredMediaSources<T extends { media_content_id?: stri
   return items.filter((item) => !IGNORED_MEDIA_SOURCES.some((src) => item.media_content_id?.startsWith(src)));
 }
 
-/**
- * Calculate grid item size based on itemsPerRow setting.
- * Used by media browser to support configurable grid columns.
- */
 export function getGridItemSize(
-  itemsPerRow: number | undefined,
+  _itemsPerRow: number | undefined,
   isPortrait: boolean,
 ): { width: string; height: string } {
-  const defaultWidth = 100;
-  const defaultHeight = isPortrait ? 180 : 150;
-
-  if (!itemsPerRow || itemsPerRow === 4) {
-    return { width: `${defaultWidth}px`, height: `${defaultHeight}px` };
-  }
-
-  // Width map based on typical card width (~400px)
-  const widthMap: Record<number, number> = {
-    1: 380,
-    2: 180,
-    3: 120,
-    4: 100,
-    5: 75,
-    6: 60,
-    7: 50,
-    8: 42,
-  };
-
-  const width = widthMap[itemsPerRow] || defaultWidth;
-  // Scale height proportionally to maintain aspect ratio
-  const scale = width / defaultWidth;
-  const height = Math.round(defaultHeight * scale);
-
-  return { width: `${width}px`, height: `${height}px` };
+  return { width: '100px', height: isPortrait ? '180px' : '150px' };
 }
 
 export function itemsWithFallbacks(mediaPlayerItems: MediaPlayerItem[], config: CardConfig): MediaPlayerItem[] {