fix(4as): freeze header in table summary (#363)

Co-authored-by: upri <[email protected]>
UPRI-NOAH · Mar 21, 2024 · ed83af1 · ed83af1
1 parent 3f04335
commit ed83af1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html b/...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
@@ -126,14 +126,14 @@
           In a large flood event, how many people might be affected and would
           need evacuation?
         </p>
-        <div class="italic lg:text-lg text-sm">
+        <div class="py-2 italic lg:text-lg text-sm">
           <span>As of {{ dateDataText }}</span>
         </div>
       </div>
 
       <!-- ... Your existing header content ... -->
     </div>
-    <div class="flex-auto p-2 overflow-y-auto">
+    <div class="flex-auto p-2">
       <div class="mb-2 bg-white">
         <label for="table-search" class="sr-only">Search</label>
         <div class="relative mt-1">
@@ -190,7 +190,7 @@
         </div>
       </div>
       <!-- Modal Content -->
-      <div class="flex-grow overflow-auto h-auto">
+      <div class="table-wrp block flex-grow max-h-full" style="height: 58vh">
         <table
           class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
         >
@@ -273,7 +273,7 @@
                         px-4
                         pb-10
                         text-base
-                        md:text-2xl
+                        md:text-xl
                         leading-none
                         text-center text-gray-600
                       "
@@ -287,7 +287,7 @@
             </div>
           </ng-container>
           <ng-template #dataAvailable>
-            <tbody class="h-96 overflow-y-auto">
+            <tbody class="h-96 overflow-scroll">
               <tr
                 *ngFor="
                   let data of affectedData

diff --git a/...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.scss b/...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.scss
@@ -0,0 +1,9 @@
+.table-wrp {
+  max-height: 75vh;
+  overflow-y: auto;
+  display: block;
+}
+thead {
+  position: sticky;
+  top: 0;
+}