Change width to 311px.

Author: nedtwigg

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

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

browser-extension/tests/playground/playground.tsx

@@ -10,7 +10,7 @@ root.render(
       <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 (300px width).
+          This shows exactly how the table appears in the browser popup (311px width).
         </p>
       </div>
 
@@ -22,7 +22,7 @@ root.render(
         <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 300px width of the browser extension popup
+            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

browser-extension/tests/playground/style.css

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