add error/loading/404 boundaries, responsive tables, Metadata API

src/components/admin/billing/custom-invoice-editor.tsx

@@ -336,6 +336,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
       <Card>
         <CardHeader>{t("editorLinesHeading")}</CardHeader>
         <div className="p-4">
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -420,6 +421,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
               })}
             </tbody>
           </table>
+          </div>
           <div className="flex gap-2 mt-3">
             <button
               onClick={addLine}

src/components/admin/billing/draft-list.tsx

@@ -76,6 +76,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
           {t("newInvoiceBtn")}
         </Link>
       </div>
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -140,6 +141,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
           })}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/admin/billing/generate-form.tsx

@@ -265,6 +265,7 @@ function DraftPreview({ draft }: { draft: InvoiceDraft }) {
         </div>
       )}
 
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -323,6 +324,7 @@ function DraftPreview({ draft }: { draft: InvoiceDraft }) {
           )}
         </tbody>
       </table>
+      </div>
 
       <div className="mt-4 pt-3 border-t border-border space-y-1 text-sm">
         <div className="flex justify-between">

src/components/admin/billing/invoice-detail-view.tsx

@@ -463,6 +463,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
       {creditNotes.length > 0 && (
         <Card>
           <CardHeader>{t("creditNotesPanelTitle")}</CardHeader>
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -518,12 +519,14 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
               ))}
             </tbody>
           </table>
+          </div>
         </Card>
       )}
 
       {/* Lines */}
       <Card>
         <CardHeader>{t("lineItemsTitle")}</CardHeader>
+        <div className="overflow-x-auto">
         <table className="w-full text-sm">
           <thead className="text-xs text-text-muted text-left">
             <tr>
@@ -572,6 +575,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
             })}
           </tbody>
         </table>
+        </div>
         <div className="mt-4 pt-3 border-t border-border space-y-1 text-sm">
           <div className="flex justify-between">
             <span className="text-text-muted">{t("subtotal")}</span>

src/components/admin/billing/invoices-table.tsx

@@ -126,6 +126,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
             {t("noInvoicesFound")}
           </p>
         ) : (
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -178,6 +179,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
               ))}
             </tbody>
           </table>
+          </div>
         )}
       </Card>
     </div>

src/components/admin/billing/org-payment-mode-list.tsx

@@ -76,6 +76,7 @@ export function OrgPaymentModeList({ orgs }: Props) {
           {error}
         </div>
       )}
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -153,6 +154,7 @@ export function OrgPaymentModeList({ orgs }: Props) {
           ))}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/admin/billing/pricing-editor.tsx

@@ -255,6 +255,7 @@ export function PricingEditor({
         <p className="text-sm text-text-muted mb-4">{t("skillPricingDesc")}</p>
 
         {initialSkillPricing.length > 0 ? (
+          <div className="overflow-x-auto">
           <table className="w-full text-sm mb-6">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -319,6 +320,7 @@ export function PricingEditor({
               })}
             </tbody>
           </table>
+          </div>
         ) : (
           <p className="text-sm text-text-muted italic mb-4">{t("noSkillsPriced")}</p>
         )}

src/components/admin/cron/cron-controls.tsx

@@ -194,6 +194,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
               {t("noRunsYet")}
             </p>
           ) : (
+            <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead className="text-xs text-text-muted text-left">
                 <tr>
@@ -241,6 +242,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
                 ))}
               </tbody>
             </table>
+            </div>
           )}
         </Card>
       </section>

src/components/admin/skills/pending-skill-requests.tsx

@@ -99,6 +99,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
           {error}
         </div>
       )}
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -199,6 +200,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
           ))}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }