fix(ui,proxy): mobile overflow polish + structured-output additionalProperties

- AccountRateLimitRecoveryChart: drop fixed 430px height on mobile and let
  the summary card row auto-size, so QuotaResetSummaryCard / PressureForecastCard
  no longer get clipped under the filter bar
- Layout / SecurityBanner / Accounts / Usage: tighten min-w-0 + overflow-hidden
  on mobile-only flex containers to stop horizontal overflow
- proxy/translator: add additionalProperties=false to every object node when
  sanitizing structured-output schemas (root + nested + items + $defs +
  anyOf/oneOf/allOf), required by Codex strict mode

Author: james-6-23

frontend/src/components/AccountRateLimitRecoveryChart.tsx

@@ -207,7 +207,7 @@ export default function AccountRateLimitRecoveryChart({ accounts, currentRpm = 0
     })
 
   return (
-    <Card className={`${compact ? 'h-[430px]' : 'mb-4'} py-0 ${className}`}>
+    <Card className={`${compact ? 'lg:h-[430px]' : 'mb-4'} py-0 ${className}`}>
       <CardContent className={compact ? 'flex h-full flex-col p-4' : 'p-4 sm:p-5'}>
         <div className="mb-2 flex flex-wrap items-start justify-between gap-3">
           <div className="min-w-0">
@@ -281,7 +281,7 @@ export default function AccountRateLimitRecoveryChart({ accounts, currentRpm = 0
           )}
         </div>
 
-        <div className={compact ? 'grid min-h-0 flex-1 grid-rows-[minmax(116px,1fr)_94px] gap-3' : 'grid gap-3'}>
+        <div className={compact ? 'grid min-h-0 flex-1 grid-rows-[200px_auto] gap-3 lg:grid-rows-[minmax(116px,1fr)_94px]' : 'grid gap-3'}>
           <div className={compact ? 'min-h-0' : 'h-[260px]'}>
             <ResponsiveContainer width="100%" height="100%">
               <ComposedChart data={chartPoints} margin={viewMode === 'reset' ? resetChartMargin : chartMargin}>

frontend/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode, useEffect, useRef, useState } from 'react'
+import { type CSSProperties, type PropsWithChildren, type ReactNode, useEffect, useRef, useState } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import { LayoutDashboard, Users, Activity, Settings, Server, Sun, Moon, Languages, Globe, BookOpen, KeyRound, Image as ImageIcon, ShieldAlert, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -108,10 +108,10 @@ export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="min-h-dvh">
       <div
-        className="grid max-w-full max-lg:grid-cols-1 max-lg:px-3 transition-[grid-template-columns] duration-200"
+        className="grid max-w-full grid-cols-1 max-lg:px-3 lg:grid-cols-[var(--admin-layout-columns)] transition-[grid-template-columns] duration-200"
         style={{
-          gridTemplateColumns: sidebarCollapsed ? '64px minmax(0,1fr)' : '264px minmax(0,1fr)',
-        }}
+          '--admin-layout-columns': sidebarCollapsed ? '64px minmax(0,1fr)' : '264px minmax(0,1fr)',
+        } as CSSProperties}
       >
         {/* Sidebar - desktop */}
         <aside className="sticky top-0 self-start h-dvh border-r border-border bg-[hsl(var(--sidebar-background))] max-lg:hidden">
@@ -268,12 +268,12 @@ export default function Layout({ children }: PropsWithChildren) {
         {/* Main content */}
         <main className="min-w-0 p-5 max-lg:p-3 max-lg:pb-[92px]">
           {/* Mobile topbar */}
-          <header className="hidden max-lg:flex items-center justify-between gap-4 mb-4 p-3 border border-border rounded-lg bg-card/95 shadow-sm">
-            <div className="flex items-center gap-3">
+          <header className="hidden max-lg:flex min-w-0 w-full max-w-full items-center justify-between gap-2 overflow-hidden mb-4 p-3 border border-border rounded-lg bg-card/95 shadow-sm">
+            <div className="flex min-w-0 flex-1 items-center gap-3">
               <img src={logoSrc} alt={siteName} className="w-8 h-8 rounded-[10px] object-cover" />
-              <strong className="max-w-[150px] truncate text-lg" title={siteName}>{siteName}</strong>
+              <strong className="min-w-0 flex-1 truncate text-lg" title={siteName}>{siteName}</strong>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex shrink-0 items-center gap-1.5">
               <button
                 onClick={toggleLang}
                 className="flex items-center justify-center size-8 rounded-lg text-muted-foreground hover:text-foreground transition-colors text-[11px] font-bold"
@@ -290,7 +290,7 @@ export default function Layout({ children }: PropsWithChildren) {
                   {theme === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
                 </span>
               </button>
-              <span className="inline-flex items-center justify-center min-h-[28px] px-2.5 rounded-full text-[12px] font-bold bg-[hsl(var(--success-bg))] text-[hsl(var(--success))] shrink-0 whitespace-nowrap">
+              <span className="inline-flex items-center justify-center min-h-[28px] px-2.5 rounded-full text-[12px] font-bold bg-[hsl(var(--success-bg))] text-[hsl(var(--success))] shrink-0 whitespace-nowrap max-[420px]:hidden">
                 {t('common.online')}
               </span>
             </div>
@@ -316,7 +316,7 @@ export default function Layout({ children }: PropsWithChildren) {
                 }`}
               >
                 {item.icon}
-                <span>{t(item.labelKey)}</span>
+                <span className="w-full truncate leading-tight">{t(item.labelKey)}</span>
               </NavLink>
             )
           })}

frontend/src/components/SecurityBanner.tsx

@@ -59,11 +59,11 @@ export default function SecurityBanner() {
   }
 
   return (
-    <div className="mb-4 flex items-start gap-3 rounded-lg border border-red-500/40 bg-red-500/10 p-4 text-red-700 dark:text-red-200">
+    <div className="mb-4 flex min-w-0 max-w-full items-start gap-3 overflow-hidden rounded-lg border border-red-500/40 bg-red-500/10 p-4 text-red-700 dark:text-red-200">
       <ShieldAlert className="mt-0.5 size-5 shrink-0" />
       <div className="flex-1 min-w-0">
         <p className="text-sm font-bold">{copy.title}</p>
-        <p className="mt-1 text-sm leading-relaxed">{copy.body}</p>
+        <p className="mt-1 break-words text-sm leading-relaxed [overflow-wrap:anywhere]">{copy.body}</p>
         <div className="mt-2 flex flex-wrap items-center gap-2">
           <a
             href="/admin/api-keys"