UI improvements; fixed offscreen race conditions

Author: liruqi

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_appName__",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
   "permissions": [

plugins/m3u8-plugin.js

@@ -319,6 +319,8 @@ const M3U8_PLUGIN = {
             reasons: ['BLOBS'],
             justification: 'Merging video segments into a single file.'
           });
+          // Give the offscreen script some time to load (fixes race condition)
+          await new Promise(r => setTimeout(r, 500));
         } catch (e) {
           console.error('Failed to create offscreen document:', e);
           this._offscreenPromise = null;
@@ -336,7 +338,8 @@ const M3U8_PLUGIN = {
           this._fallbackTabPromise = null;
           reject(new Error(chrome.runtime.lastError.message));
         } else {
-          resolve();
+          // Give the tab and its scripts some time to initialize (critical for Safari)
+          setTimeout(resolve, 1000);
         }
       });
     });

popup.css

@@ -71,8 +71,7 @@ table {
   border-collapse: collapse;
   background-color: #fff;
   border-radius: 6px;
-  /* overflow: hidden; */
-  /* Removing this to allow sticky header to work better if needed, but the container has overflow-y auto */
+  table-layout: fixed; /* Force fixed layout for strict column handling */
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -82,22 +81,25 @@ td {
   padding: 10px;
   border-bottom: 1px solid #eee;
   font-size: 13px;
+  overflow: hidden; /* Prevent content spill */
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Adjust column widths */
 th:nth-child(1),
 td:nth-child(1) {
-  width: auto;
+  width: 260px; /* Fixed width for filename */
 }
 
 th:nth-child(2),
 td:nth-child(2) {
-  width: 80px;
+  width: 70px;
 }
 
 th:nth-child(3),
 td:nth-child(3) {
-  width: 80px;
+  width: 70px;
 }
 
 th:nth-child(4),
@@ -109,9 +111,6 @@ th {
   background-color: #f5f5f5;
   font-weight: 500;
   color: #555;
-  position: sticky;
-  top: 0;
-  z-index: 1;
 }
 
 tr:last-child td {
@@ -126,7 +125,7 @@ tr:last-child td {
 }
 
 .filename {
-  max-width: 300px;
+  max-width: 240px; /* Reduced to fit in 260px column with padding/gaps */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;