feat : compact video link in overview admin

components/admin/guide-overview-form.tsx

@@ -410,33 +410,33 @@ export function GuideOverviewForm({
                     />
                     <FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription>
                   </Field>
+                  <Field>
+                    <div className="flex items-center justify-between gap-2">
+                      <div>
+                        <FieldLabel>YouTube videos</FieldLabel>
+                        <FieldDescription>ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ</FieldDescription>
+                      </div>
+                      <Button type="button" variant="outline" size="sm" disabled={youtubeLinks.length >= 20} onClick={() => setYoutubeLinks((current) => [...current, { id: createVideoLinkId(), url: "" }])}>
+                        <PlusIcon data-icon="inline-start" />
+                        เพิ่มลิงก์
+                      </Button>
+                    </div>
+                    {youtubeLinks.length ? (
+                      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleVideoDragEnd}>
+                        <SortableContext items={youtubeLinks.map((link) => link.id)} strategy={verticalListSortingStrategy}>
+                          <div className="flex flex-col gap-2">
+                            {youtubeLinks.map((link, index) => (
+                              <SortableVideoLink key={link.id} link={link} index={index} guideName={guide.name} onChange={(url) => setYoutubeLinks((current) => current.map((item) => item.id === link.id ? { ...item, url } : item))} onRemove={() => setYoutubeLinks((current) => current.filter((item) => item.id !== link.id))} />
+                            ))}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
+                    ) : <p className="text-sm text-muted-foreground">ยังไม่มีวิดีโอใน Overview</p>}
+                  </Field>
                 </FieldGroup>
               </div>
             </div>
           </Field>
-          <Field>
-            <div className="flex items-center justify-between gap-2">
-              <div>
-                <FieldLabel>YouTube videos</FieldLabel>
-                <FieldDescription>ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ</FieldDescription>
-              </div>
-              <Button type="button" variant="outline" size="sm" disabled={youtubeLinks.length >= 20} onClick={() => setYoutubeLinks((current) => [...current, { id: createVideoLinkId(), url: "" }])}>
-                <PlusIcon data-icon="inline-start" />
-                เพิ่มลิงก์
-              </Button>
-            </div>
-            {youtubeLinks.length ? (
-              <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleVideoDragEnd}>
-                <SortableContext items={youtubeLinks.map((link) => link.id)} strategy={verticalListSortingStrategy}>
-                  <div className="flex flex-col gap-2">
-                    {youtubeLinks.map((link, index) => (
-                      <SortableVideoLink key={link.id} link={link} index={index} guideName={guide.name} onChange={(url) => setYoutubeLinks((current) => current.map((item) => item.id === link.id ? { ...item, url } : item))} onRemove={() => setYoutubeLinks((current) => current.filter((item) => item.id !== link.id))} />
-                    ))}
-                  </div>
-                </SortableContext>
-              </DndContext>
-            ) : <p className="text-sm text-muted-foreground">ยังไม่มีวิดีโอใน Overview</p>}
-          </Field>
           <Field>
             <FieldLabel>Materials Overview</FieldLabel>
             <div className="grid items-start gap-4 lg:grid-cols-2">