Clean up cutting settings UI

src/pages/Cutting.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
-import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2 } from 'lucide-react';
+import { AlertTriangle, ClipboardList, Download, Layers3, Package, Palette, RotateCcw, Ruler, Save as SaveIcon, Scissors, Search, Settings2, X } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import PaginationControls from '../components/PaginationControls';
 import RefreshStatus from '../components/RefreshStatus';
@@ -264,6 +264,19 @@ const Cutting = () => {
     setCorrectionPage(1);
   }, [correctionIssueFilter, dateRange, targetCoverageDays]);
 
+  useEffect(() => {
+    if (!isSettingsOpen) return undefined;
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsSettingsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', closeOnEscape);
+    return () => document.removeEventListener('keydown', closeOnEscape);
+  }, [isSettingsOpen]);
+
   const updateFamilyYield = (familyKey: CutFamilyKey, value: string) => {
     const parsedValue = Number(value);
     setCuttingSettings(current => {
@@ -358,10 +371,17 @@ const Cutting = () => {
       return <span className="text-xs font-bold text-emerald-300">OK</span>;
     }
 
+    const issueSummary = row.issues.map(issue => issueLabels[issue]).join(', ');
+
     return (
-      <span className="inline-flex items-center gap-1.5 rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300">
-        <AlertTriangle className="h-3.5 w-3.5" />
-        {row.issues.map(issue => issueLabels[issue]).join(', ')}
+      <span
+        className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-xs font-bold text-amber-300"
+        title={issueSummary}
+      >
+        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+        <span className="truncate">
+          {row.issues.length === 1 ? issueLabels[row.issues[0]] : `${row.issues.length} pendências`}
+        </span>
       </span>
     );
   };
@@ -410,7 +430,17 @@ const Cutting = () => {
       <RefreshStatus isRefreshing={isRefreshing} />
 
       {isSettingsOpen && (
-        <div className="space-y-4 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm">
+        <div
+          className="fixed inset-0 z-50 flex justify-end bg-black/60 backdrop-blur-sm"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Regras de corte"
+          onClick={() => setIsSettingsOpen(false)}
+        >
+          <div
+            className="h-full w-full max-w-6xl space-y-4 overflow-y-auto border-l border-dark-border bg-dark-card p-5 shadow-2xl"
+            onClick={(event) => event.stopPropagation()}
+          >
           <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
             <div>
               <h2 className="text-sm font-bold text-dark-text">Regras de Corte</h2>
@@ -418,6 +448,7 @@ const Cutting = () => {
                 {configuredYieldCount} rendimentos configurados · {productOverrideCount} correções de produto
               </p>
             </div>
+            <div className="flex flex-wrap items-center gap-2">
               <button
                 type="button"
                 onClick={clearSettings}
@@ -435,6 +466,16 @@ const Cutting = () => {
                 <SaveIcon className="h-4 w-4" />
                 {saveStatus === 'saving' ? 'Salvando' : 'Salvar regras'}
               </button>
+              <button
+                type="button"
+                onClick={() => setIsSettingsOpen(false)}
+                className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text cursor-pointer"
+                title="Fechar"
+                aria-label="Fechar regras"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
           </div>
           {saveStatus === 'saved' && (
             <p className="text-xs font-semibold text-emerald-300">Regras salvas no banco de dados.</p>
@@ -585,6 +626,7 @@ const Cutting = () => {
             )}
           </div>
           </div>
+        </div>
       )}
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-4">