From 4f8677927af4f24174170bae93777ee9f2fe4c0c Mon Sep 17 00:00:00 2001
From: SimpleTest <simpletestxxx@gmail.com>
Date: Fri, 24 Jul 2026 20:52:43 +0300
Subject: [PATCH] fix(support): refine operator action forms

---
 .../live/support_operations_live.ex           | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/lib/who_need_help_web/live/support_operations_live.ex b/lib/who_need_help_web/live/support_operations_live.ex
index 66a0e3a..197e7b2 100644
--- a/lib/who_need_help_web/live/support_operations_live.ex
+++ b/lib/who_need_help_web/live/support_operations_live.ex
@@ -214,11 +214,12 @@ defmodule WhoNeedHelpWeb.SupportOperationsLive do
                   {gettext("Record the decision and notify the submitter when contact is available.")}
                 </p>
               </div>
-              <div class="mt-3 grid gap-3 md:grid-cols-[13rem_minmax(0,1fr)_auto] md:items-end">
+              <div class="mt-4 grid gap-4 lg:grid-cols-[14rem_minmax(0,1fr)] lg:items-start">
                 <.input
                   field={form[:status]}
                   type="select"
                   label={gettext("Status")}
+                  class="select w-full bg-base-100 shadow-sm"
                   options={[
                     {gettext("Open"), "open"},
                     {gettext("Urgent review"), "urgent_review"},
@@ -235,9 +236,14 @@ defmodule WhoNeedHelpWeb.SupportOperationsLive do
                   rows="2"
                   label={gettext("Decision or information request")}
                   placeholder={gettext("Explain the decision or request the missing information")}
-                  class="textarea min-h-20 w-full resize-y"
+                  class="textarea min-h-28 w-full resize-y bg-base-100 leading-relaxed shadow-sm"
                 />
-                <.button class="btn btn-error mb-2 min-w-40">
+              </div>
+              <div class="mt-2 flex flex-col gap-3 border-t border-error/15 pt-4 sm:flex-row sm:items-center sm:justify-between">
+                <p class="text-xs text-base-content/55">
+                  {gettext("Review the status and note before sending this update.")}
+                </p>
+                <.button class="btn btn-error min-w-44 sm:self-end">
                   {gettext("Save and notify")}
                 </.button>
               </div>
@@ -366,11 +372,12 @@ defmodule WhoNeedHelpWeb.SupportOperationsLive do
                   {gettext("Update the case status and add a private reply when needed.")}
                 </p>
               </div>
-              <div class="mt-3 grid gap-3 md:grid-cols-[13rem_minmax(0,1fr)_auto] md:items-end">
+              <div class="mt-4 grid gap-4 lg:grid-cols-[14rem_minmax(0,1fr)] lg:items-start">
                 <.input
                   field={form[:status]}
                   type="select"
                   label={gettext("Status")}
+                  class="select w-full bg-base-100 shadow-sm"
                   options={[
                     {gettext("Open"), "open"},
                     {gettext("Reviewing"), "reviewing"},
@@ -385,9 +392,14 @@ defmodule WhoNeedHelpWeb.SupportOperationsLive do
                   rows="2"
                   label={gettext("Private reply (optional)")}
                   placeholder={gettext("Write a clear reply for the requester")}
-                  class="textarea min-h-20 w-full resize-y"
+                  class="textarea min-h-28 w-full resize-y bg-base-100 leading-relaxed shadow-sm"
                 />
-                <.button class="btn btn-primary mb-2 min-w-40">
+              </div>
+              <div class="mt-2 flex flex-col gap-3 border-t border-primary/15 pt-4 sm:flex-row sm:items-center sm:justify-between">
+                <p class="text-xs text-base-content/55">
+                  {gettext("Review the status and reply before sending this update.")}
+                </p>
+                <.button class="btn btn-primary min-w-44 sm:self-end">
                   {gettext("Save and notify")}
                 </.button>
               </div>