Move fabric plan form to right side

src/pages/Supplies.tsx

@@ -1589,44 +1589,6 @@ const FabricPlanningScreen = () => {
           {errorMessage}
         </div>
       )}
-      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[420px_1fr] xl:items-start">
-        <form onSubmit={handleSubmit} className={`${panelClassName} p-5 xl:sticky xl:top-6`}>
-          <h2 className="text-base font-bold text-dark-text">Novo plano de malha</h2>
-          <div className="mt-4 grid grid-cols-1 gap-3">
-            <label className="text-xs font-bold text-dark-muted">
-              Malha / tecido
-              <input value={form.material} onChange={(event) => setForm(current => ({ ...current, material: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: Meia malha 30.1" />
-            </label>
-            <label className="text-xs font-bold text-dark-muted">
-              Cor
-              <input value={form.color} onChange={(event) => setForm(current => ({ ...current, color: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="Todas as cores" />
-            </label>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <label className="text-xs font-bold text-dark-muted">
-                Quantidade kg
-                <input inputMode="decimal" value={form.quantityKg} onChange={(event) => setForm(current => ({ ...current, quantityKg: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: 180" />
-              </label>
-              <label className="text-xs font-bold text-dark-muted">
-                Prioridade
-                <select value={form.priority} onChange={(event) => setForm(current => ({ ...current, priority: event.target.value }))} className={`${inputClassName} mt-1`}>
-                  <option>Normal</option>
-                  <option>Atenção</option>
-                  <option>Crítico</option>
-                </select>
-              </label>
-            </div>
-            <label className="text-xs font-bold text-dark-muted">
-              Fornecedor
-              <input value={form.supplier} onChange={(event) => setForm(current => ({ ...current, supplier: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="Opcional" />
-            </label>
-            <button type="submit" disabled={isBusy} className="mt-2 inline-flex h-11 items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer">
-              <Save className="h-4 w-4" />
-              {isBusy ? 'Salvando...' : 'Salvar plano'}
-            </button>
-          </div>
-        </form>
-
-        <div className="space-y-6">
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
           <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Planos ativos</p>
@@ -1642,6 +1604,7 @@ const FabricPlanningScreen = () => {
         </div>
       </div>
 
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px] xl:items-start">
         <div className={`${panelClassName} overflow-hidden`}>
           <div className="border-b border-dark-border p-5">
             <h2 className="text-base font-bold text-dark-text">Planos de malha</h2>
@@ -1684,7 +1647,42 @@ const FabricPlanningScreen = () => {
             </div>
           )}
         </div>
+
+        <form onSubmit={handleSubmit} className={`${panelClassName} p-5`}>
+          <h2 className="text-base font-bold text-dark-text">Novo plano de malha</h2>
+          <div className="mt-4 grid grid-cols-1 gap-3">
+            <label className="text-xs font-bold text-dark-muted">
+              Malha / tecido
+              <input value={form.material} onChange={(event) => setForm(current => ({ ...current, material: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: Meia malha 30.1" />
+            </label>
+            <label className="text-xs font-bold text-dark-muted">
+              Cor
+              <input value={form.color} onChange={(event) => setForm(current => ({ ...current, color: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="Todas as cores" />
+            </label>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <label className="text-xs font-bold text-dark-muted">
+                Quantidade kg
+                <input inputMode="decimal" value={form.quantityKg} onChange={(event) => setForm(current => ({ ...current, quantityKg: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="ex: 180" />
+              </label>
+              <label className="text-xs font-bold text-dark-muted">
+                Prioridade
+                <select value={form.priority} onChange={(event) => setForm(current => ({ ...current, priority: event.target.value }))} className={`${inputClassName} mt-1`}>
+                  <option>Normal</option>
+                  <option>Atenção</option>
+                  <option>Crítico</option>
+                </select>
+              </label>
             </div>
+            <label className="text-xs font-bold text-dark-muted">
+              Fornecedor
+              <input value={form.supplier} onChange={(event) => setForm(current => ({ ...current, supplier: event.target.value }))} className={`${inputClassName} mt-1`} placeholder="Opcional" />
+            </label>
+            <button type="submit" disabled={isBusy} className="mt-2 inline-flex h-11 items-center justify-center gap-2 rounded-lg bg-brand-primary px-4 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer">
+              <Save className="h-4 w-4" />
+              {isBusy ? 'Salvando...' : 'Salvar plano'}
+            </button>
+          </div>
+        </form>
       </div>
     </div>
   );