From fbf1b31cf79e731c38e349d83e3bb54c2e68ba60 Mon Sep 17 00:00:00 2001
From: dharaneesh-r <dharaneesh@tenext.in>
Date: Fri, 28 Aug 2026 12:17:37 +0530
Subject: [PATCH] updates on the  design in the multiple order page

---
 src/pages/doormile/orders/MultipleOrders.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/doormile/orders/MultipleOrders.jsx b/src/pages/doormile/orders/MultipleOrders.jsx
index ac16cf9..e9d5aba 100644
--- a/src/pages/doormile/orders/MultipleOrders.jsx
+++ b/src/pages/doormile/orders/MultipleOrders.jsx
@@ -759,9 +759,9 @@ export default function MultipleOrders() {
           </div>
 
           {/* Right Column — File Preview & Drop List Table (7 Cols) */}
-          <div className="lg:col-span-7 bg-white rounded-xl border border-slate-200 shadow-xs flex flex-col min-h-[560px] overflow-hidden">
+          <div className="lg:col-span-7 bg-white rounded-xl border border-slate-200 shadow-xs flex flex-col lg:h-[calc(100vh-140px)] lg:min-h-[580px] lg:max-h-[860px] lg:sticky lg:top-20 overflow-hidden">
             {/* Table Header / Action Strip */}
-            <div className="p-4 border-b border-slate-100 flex items-center justify-between gap-3 bg-slate-50/50">
+            <div className="shrink-0 p-4 border-b border-slate-100 flex items-center justify-between gap-3 bg-slate-50/50">
               <div className="flex items-center gap-2.5">
                 <h2 className="text-sm font-bold text-slate-900">
                   {previewMode === 'drops' ? 'Drop List' : previewMode === 'preview' ? 'File Preview' : 'Order Preview'}
@@ -781,7 +781,7 @@ export default function MultipleOrders() {
 
             {/* Action Banner for File Preview */}
             {previewMode === 'preview' && users.length > 0 && (
-              <div className="p-3.5 bg-amber-50/70 border-b border-amber-200/80 flex items-center justify-between gap-3">
+              <div className="shrink-0 p-3.5 bg-amber-50/70 border-b border-amber-200/80 flex items-center justify-between gap-3">
                 <div>
                   <div className="text-xs font-bold text-amber-950">Process & Calculate Distances</div>
                   <div className="text-[11px] text-amber-800 mt-0.5">
@@ -806,8 +806,8 @@ export default function MultipleOrders() {
               </div>
             )}
 
-            {/* Main Content Area */}
-            <div className="flex-1 overflow-auto">
+            {/* Main Content Area — Scrollable Table Viewport */}
+            <div className="flex-1 min-h-0 overflow-y-auto overflow-x-auto relative">
               {previewMode === 'empty' ? (
                 <div className="h-full flex flex-col items-center justify-center p-12 text-center">
                   <div className="w-12 h-12 rounded-2xl bg-slate-100 text-slate-400 flex items-center justify-center mb-3">
@@ -852,7 +852,7 @@ export default function MultipleOrders() {
               ) : previewMode === 'preview' ? (
                 /* Raw spreadsheet preview table */
                 <table className="w-full text-left border-collapse text-xs">
-                  <thead className="bg-slate-100 text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10">
+                  <thead className="bg-slate-100/95 backdrop-blur-xs text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10 shadow-2xs">
                     <tr>
                       <th className="py-3 pl-4 pr-2 w-10">#</th>
                       <th className="py-3 px-3">Customer</th>
@@ -880,7 +880,7 @@ export default function MultipleOrders() {
               ) : (
                 /* Interactive Drop List table */
                 <table className="w-full text-left border-collapse text-xs">
-                  <thead className="bg-slate-100 text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10">
+                  <thead className="bg-slate-100/95 backdrop-blur-xs text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10 shadow-2xs">
                     <tr>
                       <th className="py-3 pl-4 pr-2 w-8">#</th>
                       <th className="py-3 px-3 w-40">Customer</th>