fix(ui): адаптировать панели трафика для телефона

app/(main)/traffic/page.tsx

@@ -529,9 +529,9 @@ function DetailHeader({ range, setRange, children }: {
   range: Range; setRange: (r: Range) => void; children: ReactNode
 }) {
   return (
-    <div className="flex items-start justify-between mb-3 gap-3">
+    <div className="flex flex-wrap items-start justify-between mb-3 gap-3">
       <div className="flex items-center gap-2 flex-wrap min-w-0">{children}</div>
-      <div className="flex gap-1 shrink-0">
+      <div className="flex flex-wrap gap-1">
         {TRAFFIC_RANGE_KEYS.map((r) => (
           <Button key={r} size="sm" variant={r === range ? "default" : "ghost"}
             className="h-7 px-2 text-xs" onClick={() => setRange(r)}>
@@ -1178,7 +1178,7 @@ export default function TrafficPage() {
 
       {/* ── mode tab bar ── */}
       <div className="border-b bg-background shrink-0">
-        <div className="flex items-center px-6">
+        <div className="flex items-center overflow-x-auto px-3 sm:px-6">
           {GROUP_MODES.map(({ mode, icon, label }) => (
             <button key={mode} onClick={() => handleModeChange(mode)}
               className={cn(
@@ -1193,7 +1193,7 @@ export default function TrafficPage() {
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-6">
+      <div className="flex-1 min-w-0 overflow-y-auto p-3 sm:p-6">
         <div className="flex flex-col gap-5">
           {!(effectiveMode === "flows" && range === "30d") && (!isLive || !(effectiveMode === "flows" ? liveError : trafficError)) && <KpiStatGrid
             isLoading={isLive && (effectiveMode === "flows" ? liveBusy : trafficLoading)}
@@ -1219,7 +1219,7 @@ export default function TrafficPage() {
                   {flowError}
                 </div>
               )}
-              <div className="grid grid-cols-[300px_1fr] gap-5 items-start">
+              <div className="grid min-w-0 grid-cols-1 xl:grid-cols-[300px_minmax(0,1fr)] gap-5 items-start">
                 <div className="flex flex-col gap-3">
                   <div role="group" aria-label="Источник потоков" className="flex gap-1">
                     <button
@@ -1275,7 +1275,7 @@ export default function TrafficPage() {
                       </button>
                     ))}
                   </div>
-                  {range === "30d" && <p className="text-xs text-muted-foreground">Выбор сервера: активность за последние 24 часа. Месячный отчёт — справа.</p>}
+                  {range === "30d" && <p className="text-xs text-muted-foreground">Выбор сервера: активность за последние 24 часа. Месячный отчёт — в деталях сервера.</p>}
                   <div className="flex flex-col gap-2">
                     {sortedFlowCards.map((card) => (
                       <FlowEntityCardView
@@ -1292,8 +1292,8 @@ export default function TrafficPage() {
                     ) : null}
                   </div>
                 </div>
-                <Frame dense className="w-full flex flex-col">
-                  <FramePanel className="flex-1 px-5 pb-5 pt-5">
+                <Frame dense className="w-full min-w-0 flex flex-col">
+                  <FramePanel className="flex-1 min-w-0 p-3 sm:p-5">
                     {analyticsLoading && <p role="status">Загрузка аналитики…</p>}
                     {currentAnalytics?.error && <Alert variant="destructive" role="alert"><AlertTitle>Аналитика недоступна</AlertTitle><AlertDescription>{currentAnalytics.error}<Button size="sm" variant="outline" onClick={() => setAnalyticsRetry(value => value + 1)}>Повторить аналитику</Button></AlertDescription></Alert>}
                     <FlowAnalyticsDetail
@@ -1326,7 +1326,7 @@ export default function TrafficPage() {
               />
             </div>
           ) : (
-            <div className="grid grid-cols-[300px_1fr] gap-5 items-start">
+            <div className="grid min-w-0 grid-cols-1 xl:grid-cols-[300px_minmax(0,1fr)] gap-5 items-start">
             {/* ── left panel ── */}
             <div className="flex flex-col gap-3">
 
@@ -1375,8 +1375,8 @@ export default function TrafficPage() {
             </div>
 
             {/* ── detail panel ── */}
-            <Frame dense className="w-full flex flex-col">
-              <FramePanel className="flex-1 px-5 pb-5 pt-5">
+            <Frame dense className="w-full min-w-0 flex flex-col">
+              <FramePanel className="flex-1 min-w-0 p-3 sm:p-5">
                 {isLive && effectiveMode === "servers" && (
                   <div className="mb-3 pb-3 border-b">
                     <div className="flex items-center gap-2 flex-wrap">