Set the width in only one place.

Author: nedtwigg

browser-extension/src/styles/popup-frame.css

@@ -1,6 +1,10 @@
 /* Popup window frame styles */
+:root {
+  --popup-width: 311px;
+}
+
 body {
-  width: 311px;
+  width: var(--popup-width);
   padding: 15px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 14px;

browser-extension/tests/playground/playground.tsx

@@ -9,9 +9,6 @@ root.render(
     <div className='container px-6 py-8'>
       <div className='bg-white p-6 rounded-lg shadow-sm border border-slate-200 mb-6'>
         <h1 className='text-2xl font-bold text-slate-900 mb-2'>Popup Simulator</h1>
-        <p className='text-slate-600'>
-          This shows exactly how the table appears in the browser popup (311px width).
-        </p>
       </div>
 
       <div className='popup-frame'>
@@ -21,12 +18,7 @@ root.render(
       <div className='bg-slate-50 p-4 rounded-lg border border-slate-200 mt-6 max-w-2xl mx-auto'>
         <h3 className='font-medium text-slate-900 mb-2'>Development Notes</h3>
         <ul className='text-sm text-slate-600 space-y-1'>
-          <li>
-            The popup frame above matches the exact 311px width of the browser extension popup
-          </li>
-          <li>
-            Any changes to <code>popup/style.css</code> will automatically update here
-          </li>
+          <li>The popup frame above matches the exact browser extension popup.</li>
           <li>Hot reload is active for instant updates</li>
         </ul>
       </div>

browser-extension/tests/playground/style.css

@@ -16,7 +16,7 @@ body {
 
 /* Popup simulator frame */
 .popup-frame {
-  width: 311px;
+  width: var(--popup-width);
   padding: 15px;
   font-size: 14px;
   line-height: 1.4;