Expand /questions/new form: wider container, larger inputs, hint texts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/(student)/questions/new/page.tsx

@@ -37,8 +37,8 @@ export default function NewQuestionPage() {
   }
 
   return (
-    <div className="max-w-xl mx-auto px-4 py-8">
+    <div className="max-w-2xl mx-auto px-6 py-10">
-      <div className="flex items-center gap-3 mb-6">
+      <div className="mb-8">
         <Link
           href="/questions"
           className="text-sm"
@@ -48,14 +48,17 @@ export default function NewQuestionPage() {
         </Link>
       </div>
 
-      <h1 className="text-xl font-bold mb-6" style={{ color: "var(--foreground)" }}>
+      <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--foreground)" }}>
         Новый вопрос
       </h1>
+      <p className="text-sm mb-8" style={{ color: "var(--muted-foreground)" }}>
+        Опишите свой вопрос подробно — куратор ответит в ближайшее время.
+      </p>
 
-      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
         <div>
           <label
-            className="block text-sm font-bold mb-1"
+            className="block text-sm font-bold mb-2"
             style={{ color: "var(--foreground)" }}
           >
             Тема вопроса
@@ -66,18 +69,21 @@ export default function NewQuestionPage() {
             onChange={(e) => setTitle(e.target.value)}
             placeholder="Кратко опишите суть вопроса"
             required
-            className="w-full text-sm px-3 py-2 outline-none"
+            className="w-full text-sm px-4 py-3 outline-none"
             style={{
               border: "2px solid var(--border)",
               background: "var(--color-surface)",
               color: "var(--foreground)",
             }}
           />
+          <p className="text-xs mt-1.5" style={{ color: "var(--muted-foreground)" }}>
+            Например: «Не получается настроить плагин» или «Вопрос по уроку 3»
+          </p>
         </div>
 
         <div>
           <label
-            className="block text-sm font-bold mb-1"
+            className="block text-sm font-bold mb-2"
             style={{ color: "var(--foreground)" }}
           >
             Описание
@@ -85,14 +91,15 @@ export default function NewQuestionPage() {
           <textarea
             value={text}
             onChange={(e) => setText(e.target.value)}
-            placeholder="Подробно опишите вопрос или проблему"
+            placeholder="Подробно опишите вопрос или проблему. Что именно не получается? Что уже пробовали? Прикрепите скриншот или ссылку, если нужно."
             required
-            rows={6}
+            rows={10}
-            className="w-full text-sm px-3 py-2 outline-none resize-none"
+            className="w-full text-sm px-4 py-3 outline-none resize-y"
             style={{
               border: "2px solid var(--border)",
               background: "var(--color-surface)",
               color: "var(--foreground)",
+              minHeight: "200px",
             }}
           />
         </div>
@@ -103,19 +110,21 @@ export default function NewQuestionPage() {
           </p>
         )}
 
-        <button
+        <div className="flex justify-end">
-          type="submit"
+          <button
-          disabled={loading || !title.trim() || !text.trim()}
+            type="submit"
-          className="self-end text-sm font-bold px-6 py-2"
+            disabled={loading || !title.trim() || !text.trim()}
-          style={{
+            className="text-sm font-bold px-8 py-3"
-            background: "var(--foreground)",
+            style={{
-            color: "var(--background)",
+              background: "var(--foreground)",
-            border: "none",
+              color: "var(--background)",
-            opacity: loading ? 0.6 : 1,
+              border: "none",
-          }}
+              opacity: loading || !title.trim() || !text.trim() ? 0.5 : 1,
-        >
+            }}
-          {loading ? "Отправка..." : "Отправить →"}
+          >
-        </button>
+            {loading ? "Отправка..." : "Отправить →"}
+          </button>
+        </div>
       </form>
     </div>
   );