ui fixes

src/lib/utils.ts

@@ -89,7 +89,7 @@ export const computeGrowthSingleList = (data, actualList) => {
 export const groupScreenerRules = (allRows) => {
   const categoryOrder = [
     "Most Popular", "Company Info","Price & Volume", "Valuation & Ratios", "Valuation & Price Targets", "Margins", 
-    "Technical Analysis","Forecasts, Analysts & Price Targets", "Dividends", "Revenue / Sales", "Net Income", "Other Profits","Cash Flow", "Others"
+    "Performance","Technical Analysis","Forecasts, Analysts & Price Targets", "Dividends", "Revenue / Sales", "Net Income", "Other Profits","Cash Flow", "Others"
   ];
 
   // Group rows by category

src/routes/stock-screener/+page.svelte

@@ -222,6 +222,7 @@
       step: ["20%", "10%", "5%", "1%", "-1%", "-5%", "-10%", "-20%"],
       defaultCondition: "over",
       defaultValue: "any",
+      category: "Performance",
     },
     change1M: {
       label: "Price Change 1M",
@@ -240,6 +241,7 @@
       ],
       defaultCondition: "over",
       defaultValue: "any",
+      category: "Performance",
     },
     change3M: {
       label: "Price Change 3M",
@@ -258,6 +260,7 @@
       ],
       defaultCondition: "over",
       defaultValue: "any",
+      category: "Performance",
     },
     change6M: {
       label: "Price Change 6M",
@@ -276,6 +279,7 @@
       ],
       defaultCondition: "over",
       defaultValue: "any",
+      category: "Performance",
     },
     change1Y: {
       label: "Price Change 1Y",
@@ -294,6 +298,7 @@
       ],
       defaultCondition: "over",
       defaultValue: "any",
+      category: "Performance",
     },
     change3Y: {
       label: "Price Change 3Y",
@@ -312,6 +317,7 @@
       ],
       defaultCondition: "over",
       defaultValue: "any",
+      category: "Performance",
     },
     marketCap: {
       label: "Market Cap",
@@ -744,6 +750,7 @@
 
       defaultCondition: "over",
       defaultValue: "-5%",
+      category: "Performance",
     },
     //trendAnalysis: { label: 'AI Trend Analysis', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' },
     //fundamentalAnalysis: { label: 'AI Fundamental Analysis', step: ['80%','70%','60%','50%'], category: 'ai', defaultCondition: 'over', defaultValue: '50%' },
@@ -948,6 +955,7 @@
 
       defaultCondition: "over",
       defaultValue: "1",
+      category: "Valuation & Ratios",
     },
     netIncomePerShare: {
       label: "Net Income / Share",
@@ -3186,7 +3194,6 @@ const handleKeyDown = (event) => {
 
 <!--Start Choose Rule Modal-->
 <input type="checkbox" id="ruleModal" class="modal-toggle" />
-
 <dialog id="ruleModal" class="modal p-2 sm:p-0">
   <label
     id="ruleModal"
@@ -3196,16 +3203,21 @@ const handleKeyDown = (event) => {
   ></label>
 
   <div
-    class="modal-box relative z-50 mx-2 min-h-[80vh] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl"
+    class="modal-box relative z-20 mx-2 min-h-[30vh] h-[800px] rounded bg-default opacity-100 border border-gray-600 bp:mx-3 sm:mx-4 w-full max-w-6xl overflow-y-auto"
+  >
+    <div class="relative flex flex-col w-full">
+      <!-- Sticky Header -->
+
+      <div
+        class="fixed w-full h-fit sticky -top-6 z-40 bg-[#1D232A] shadow-sm opacity-100 pb-6 pt-5 border-gray-600 border-b"
       >
-    <div class="flex flex-col w-full">
         <div class="flex flex-row items-center justify-between mb-2">
           <h2 class="text-white text-[1rem] sm:text-xl font-semibold">
             Select screener filters ({allRows?.length} total)
           </h2>
           <label
             for="ruleModal"
-          class="cursor-pointer absolute right-3 top-3 text-[1rem] sm:text-[1.8rem] text-white"
+            class="inline-block cursor-pointer absolute right-0 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
           >
             <svg
               class="w-6 h-6 sm:w-8 sm:h-8"
@@ -3285,7 +3297,9 @@ const handleKeyDown = (event) => {
           </div>
         </form>
         <!-- End Search bar -->
-      <div class="border-t border-gray-600 mt-6 mb-3" />
+      </div>
+
+      <!-- Content -->
       <div class="text-white">
         {#each searchTerm?.length !== 0 ? Object?.entries(filteredGroupedRules) : Object?.entries(groupedRules) as [category, rules]}
           <h4 class="mb-1 font-semibold text-lg mt-5">{category}</h4>
@@ -3310,10 +3324,16 @@ const handleKeyDown = (event) => {
             {/each}
           </div>
         {/each}
+        {#if searchTerm?.length > 0 && Object?.entries(filteredGroupedRules)?.length === 0}
+          <div class="text-white mt-5 font-semibold text-[1rem] sm:text-lg">
+            Nothing found
+          </div>
+        {/if}
       </div>
     </div>
   </div>
 </dialog>
+
 <!--End Choose Rule Modal-->
 
 <!--Start Add Strategy Modal-->