release: 4.6.136 streamerProfileHeader is-hidden + skeleton class owns flex

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.135",
+  "version": "4.6.136",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.135",
+      "version": "4.6.136",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.135",
+  "version": "4.6.136",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

src/index.html

@@ -260,7 +260,7 @@
             <div class="content">
                 <!-- VODs Tab -->
                 <div class="tab-content active" id="vodsTab">
-                    <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
+                    <div id="streamerProfileHeader" class="streamer-profile-header is-hidden"></div>
                     <div class="vod-filter-row">
                         <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                         <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>

src/renderer-profile.ts

@@ -30,16 +30,15 @@ function formatLastStreamAgo(iso: string | null): string {
 function hideStreamerProfileHeader(): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.style.display = 'none';
+    el.classList.add('is-hidden');
     applyHtml(el, '');
 }
 
 function renderStreamerProfileSkeleton(login: string): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.classList.remove('is-live');
+    el.classList.remove('is-live', 'is-hidden');
     el.classList.add('streamer-profile-skeleton');
-    el.style.display = 'flex';
     applyHtml(el, `
         <div class="streamer-profile-skel-block avatar"></div>
         <div class="streamer-profile-body">
@@ -60,9 +59,8 @@ function renderStreamerProfileSkeleton(login: string): void {
 function renderStreamerProfileCard(p: StreamerProfile): void {
     const el = document.getElementById('streamerProfileHeader');
     if (!el) return;
-    el.classList.remove('streamer-profile-skeleton');
+    el.classList.remove('streamer-profile-skeleton', 'is-hidden');
     if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live');
-    el.style.display = 'block';
 
     const safeLogin = p.login.replace(/'/g, "\\'");
     const safeUrl = p.twitchUrl.replace(/'/g, "\\'");

src/styles.css

@@ -4257,7 +4257,14 @@ input[type="number"]::-webkit-outer-spin-button {
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
 }
 
-/* Skeleton loading state */
+/* Skeleton loading state — switches the profile-header from its
+   regular block layout to a flex row so the avatar + body sit
+   side-by-side. The element itself was previously flipped via inline
+   .style.display='flex' in renderStreamerProfileSkeleton(). */
+.streamer-profile-skeleton {
+    display: flex;
+}
+
 .streamer-profile-skeleton .streamer-profile-skel-block {
     background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);
     background-size: 200% 100%;