From dfc228b1d24115158277af5916a65f0c1c167e42 Mon Sep 17 00:00:00 2001
From: mikeyoo0405 <mikeyoo0405@gmail.com>
Date: Tue, 1 Sep 2026 20:42:29 +0900
Subject: [PATCH] fix(fe): arrange course question-answer layout

---
 .../course/[courseId]/_components/CourseQnaTable.tsx     | 9 ++++++---
 .../app/(client)/(main)/course/[courseId]/qna/page.tsx   | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseQnaTable.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseQnaTable.tsx
index 92239ea406..827f9654c0 100644
--- a/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseQnaTable.tsx
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseQnaTable.tsx
@@ -85,8 +85,8 @@ export function CourseQnaTable({ courseId }: CourseQnaTableProps) {
       columns={columns}
       defaultSortState={[{ id: 'createTime', desc: true }]}
     >
-      <div className="mb-6 flex items-center justify-between gap-4">
-        <div className="flex h-[44px] w-[390px] items-center rounded-full border border-gray-200 bg-white p-1 px-[5px] py-[5px]">
+      <div className="mb-6 flex flex-nowrap items-center justify-between gap-6">
+        <div className="flex h-[44px] min-w-0 max-w-[390px] flex-[3_1_0] items-center rounded-full border border-gray-200 bg-white p-1 px-[5px] py-[5px]">
           <button
             onClick={() => setFilterType('General')}
             className={cn(
@@ -111,7 +111,10 @@ export function CourseQnaTable({ courseId }: CourseQnaTableProps) {
           </button>
         </div>
 
-        <DataTableSearchBar columndId="title" />
+        <DataTableSearchBar
+          columndId="title"
+          containerClassName="w-full min-w-0 max-w-[280px] flex-[2_1_0]"
+        />
       </div>
       <DataTable
         getHref={(row: CourseQnaListItem) =>
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/qna/page.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/qna/page.tsx
index 905529f95d..e7264b3033 100644
--- a/apps/frontend/app/(client)/(main)/course/[courseId]/qna/page.tsx
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/qna/page.tsx
@@ -10,11 +10,11 @@ export default function QNA() {
   const courseId = Number(params.courseId)
   return (
     <div className="mt-20 flex flex-col gap-6 px-10">
-      <div className="mb-6 flex flex-nowrap items-center justify-between">
-        <span className="text-2xl font-semibold leading-[33.6px] tracking-[-0.48px]">
+      <div className="mb-6 flex items-center justify-between gap-4">
+        <span className="min-w-0 break-words text-2xl font-semibold leading-[33.6px] tracking-[-0.48px]">
           QUESTION & ANSWER
         </span>
-        <div className="mr-10 w-[84px]">
+        <div className="w-[120px] shrink-0">
           <QnAPostButton
             section="course"
             canCreateQnA={true}