From 4d90785c5b3d18ab7fa0eddb23e09d7d89fa1386 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Wed, 25 Mar 2026 21:40:08 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20team=20editor=20layout=20=E2=80=94=20com?=
 =?UTF-8?q?pact=20header=20with=20photo=20matching=20field=20height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Photo 150px wide, stretches to match fields height (no empty space)
- Profile header: photo + name/role/instagram inline
- Full-width descriptions and biography below
- Remove extra closing div that caused TS error
---
 src/app/admin/team/[id]/page.tsx | 96 +++++++++++++++-----------------
 1 file changed, 46 insertions(+), 50 deletions(-)

diff --git a/src/app/admin/team/[id]/page.tsx b/src/app/admin/team/[id]/page.tsx
index c872d41..627d853 100644
--- a/src/app/admin/team/[id]/page.tsx
+++ b/src/app/admin/team/[id]/page.tsx
@@ -257,40 +257,31 @@ function TeamMemberEditor() {
         ) : null}
       </div>
 
-      <div className="mt-6 flex gap-6 items-start">
-        {/* Photo */}
-        <div className="shrink-0">
-          <p className="text-sm text-neutral-400 mb-2">Фото</p>
-          <label className="relative block w-[130px] aspect-[3/4] overflow-hidden rounded-xl border border-white/10 cursor-pointer group">
-            <Image
-              src={data.image}
-              alt={data.name || "Фото"}
-              fill
-              className="object-cover"
-              sizes="130px"
-              priority
-            />
-            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-1">
-              {uploading ? (
-                <Loader2 size={20} className="animate-spin text-white" />
-              ) : (
-                <>
-                  <Upload size={20} className="text-white" />
-                  <span className="text-[11px] text-white/80">Изменить фото</span>
-                </>
-              )}
-            </div>
-            <input
-              type="file"
-              accept="image/*"
-              onChange={handleUpload}
-              className="hidden"
-            />
-          </label>
-        </div>
+      {/* Profile header: photo + name/role/instagram */}
+      <div className="mt-6 flex gap-5 items-start">
+        <label className="relative shrink-0 block w-[150px] self-stretch overflow-hidden rounded-xl border border-white/10 cursor-pointer group">
+          <Image
+            src={data.image}
+            alt={data.name || "Фото"}
+            fill
+            className="object-cover"
+            sizes="150px"
+            priority
+          />
+          <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-1">
+            {uploading ? (
+              <Loader2 size={20} className="animate-spin text-white" />
+            ) : (
+              <>
+                <Upload size={20} className="text-white" />
+                <span className="text-[11px] text-white/80">Изменить</span>
+              </>
+            )}
+          </div>
+          <input type="file" accept="image/*" onChange={handleUpload} className="hidden" />
+        </label>
 
-        {/* Fields */}
-        <div className="space-y-4">
+        <div className="flex-1 space-y-3">
           <div className="grid grid-cols-2 gap-3">
             <InputField
               label="Имя"
@@ -331,7 +322,7 @@ function TeamMemberEditor() {
                   validateInstagram(username);
                 }}
                 placeholder="username"
-                className={`w-full rounded-lg border bg-neutral-800 pl-8 pr-10 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+                className={`w-full rounded-lg border bg-neutral-800 pl-8 pr-10 py-2.5 text-white placeholder-neutral-500 outline-none hover:border-gold/30 transition-colors ${
                   igStatus === "invalid"
                     ? "border-red-500 focus:border-red-500"
                     : igStatus === "valid"
@@ -352,22 +343,27 @@ function TeamMemberEditor() {
               <p className="mt-1 text-xs text-neutral-500">instagram.com/{data.instagram}</p>
             )}
           </div>
-          <TextareaField
-            label="Краткое описание (для карточки)"
-            value={data.shortDescription}
-            onChange={(v) => setData({ ...data, shortDescription: v })}
-            rows={2}
-            placeholder="1-2 предложения для карусели"
-          />
-          <TextareaField
-            label="Полное описание (для страницы тренера)"
-            value={data.description}
-            onChange={(v) => setData({ ...data, description: v })}
-            rows={6}
-          />
+        </div>
+      </div>
 
-          <div className="border-t border-white/5 pt-4 mt-4">
-            <p className="text-sm font-medium text-neutral-300 mb-4">Биография</p>
+      {/* Full-width fields */}
+      <div className="mt-6 space-y-4">
+        <TextareaField
+          label="Краткое описание (для карточки)"
+          value={data.shortDescription}
+          onChange={(v) => setData({ ...data, shortDescription: v })}
+          rows={2}
+          placeholder="1-2 предложения для карусели"
+        />
+        <TextareaField
+          label="Полное описание (для страницы тренера)"
+          value={data.description}
+          onChange={(v) => setData({ ...data, description: v })}
+          rows={6}
+        />
+
+        <div className="border-t border-white/5 pt-4 mt-4">
+          <p className="text-sm font-medium text-neutral-300 mb-4">Биография</p>
             <div className="space-y-4">
               <ListField
                 label="Опыт"
@@ -411,6 +407,6 @@ function TeamMemberEditor() {
           </div>
         </div>
       </div>
-    </div>
   );
 }
+