-search project

ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html

@@ -1,8 +1,9 @@
-<div class="h-screen bg-gray-100 flex flex-col">
+<div class="h-full bg-gray-100 flex flex-col w-full"> <!-- แก้ h-screen เป็น h-full -->
 
-    <header class="flex justify-between items-center py-4 px-6">
+    <!-- Header: ใช้ flex-shrink-0 เพื่อไม่ให้โดนบีบ และ bg-white เพื่อให้ตัดกับ content -->
+    <header class="shrink-0 flex justify-between items-center py-4 px-6">
       @if (mode == 'default') {
-      <div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
+      <div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
           <div>
             <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
              <span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
@@ -10,9 +11,8 @@
             <p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
             </div>
           </div>
-        <!-- <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1> -->
       } @else if (mode == 'add')  {
-        <div class="flex flex-col md:flex-row justify-between items-end gap-4">
+        <div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
               <div>
                 <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
                   <button (click)="onCancelProject()"
@@ -31,7 +31,8 @@
 
     </header>
 
-    <div class="grow overflow-y-auto px-6 pb-6">
+    <!-- Content: ใช้ flex-1 เพื่อกินพื้นที่ที่เหลือ และ overflow-y-auto เพื่อให้ scroll เฉพาะส่วนนี้ -->
+    <div class="flex-1 overflow-y-auto px-6 pb-6">
 
         @if ( mode == 'default') {
             <app-main-project></app-main-project>