style: Fix responsive layout for Firefox/Mac and improve table stability

frontend/app/page.tsx

@@ -146,12 +146,13 @@ export default function HomePage() {
         </button>
       </div>
 
-      <div className="mx-auto flex flex-col md:flex-row min-h-screen max-w-[1500px] gap-4 md:gap-8 px-4 md:px-8 py-4 md:py-6">
-        <div className={`${isMobileMenuOpen ? "fixed inset-0 z-[60] flex" : "hidden"} md:block md:sticky md:top-6 md:h-[calc(100vh-3rem)]`}>
+      <div className="flex flex-col md:flex-row min-h-screen gap-6 p-4 md:p-8">
+        {/* Sidebar Container */}
+        <div className={`${isMobileMenuOpen ? "fixed inset-0 z-[60] flex" : "hidden"} md:block md:w-72 md:shrink-0 md:sticky md:top-8 md:h-[calc(100vh-4rem)]`}>
           {isMobileMenuOpen && (
             <div className="absolute inset-0 bg-black/80 backdrop-blur-sm md:hidden" onClick={() => setIsMobileMenuOpen(false)} />
           )}
-          <div className="relative z-10 w-72 md:w-auto h-full md:h-auto">
+          <div className="relative z-10 w-72 h-full">
             <Sidebar
               tabs={tabs}
               activeTab={activeTab}
@@ -164,7 +165,8 @@ export default function HomePage() {
           </div>
         </div>
         
-        <main className="flex-1 flex flex-col gap-6 overflow-hidden w-full">
+        {/* Main Content */}
+        <main className="flex-1 min-w-0 flex flex-col gap-8">
           {/* Dashboard Header */}
           <header className="flex flex-col md:flex-row md:items-center justify-between gap-4 px-2">
             <div>

frontend/components/TenderSearch.tsx

@@ -162,18 +162,19 @@ export default function TenderSearch({ tenders, onSearch, onAnalyze, forceShowFo
             </p>
           </div>
         ) : (
-          <div className="glass-card rounded-3xl overflow-hidden overflow-x-auto shadow-2xl">
-            <table className="w-full min-w-[1000px] text-left text-sm">
-              <thead className="bg-white/5 text-slate-500 uppercase text-[10px] tracking-widest font-bold">
-                <tr>
-                  <th className="px-6 py-5">Code</th>
-                  <th className="px-6 py-5">Opportunity</th>
-                  <th className="px-6 py-5">Buyer</th>
-                  <th className="px-6 py-5 text-center">Status</th>
-                  <th className="px-6 py-5 text-right">Deadline</th>
-                  <th className="px-6 py-5 text-right pr-10">Actions</th>
-                </tr>
-              </thead>
+          <div className="glass-card rounded-3xl overflow-hidden shadow-2xl border border-white/5">
+            <div className="overflow-x-auto custom-scrollbar">
+              <table className="w-full text-left text-sm table-fixed border-collapse">
+                <thead className="bg-white/5 text-slate-500 uppercase text-[10px] tracking-widest font-bold border-b border-white/5">
+                  <tr>
+                    <th className="px-6 py-5 w-[120px]">Code</th>
+                    <th className="px-6 py-5 w-[300px]">Opportunity</th>
+                    <th className="px-6 py-5 w-[200px]">Buyer</th>
+                    <th className="px-6 py-5 text-center w-[120px]">Status</th>
+                    <th className="px-6 py-5 text-right w-[120px]">Deadline</th>
+                    <th className="px-6 py-5 text-right pr-10 w-[120px]">Actions</th>
+                  </tr>
+                </thead>
               <tbody className="divide-y divide-white/5">
                 {filteredTenders.map((tender) => (
                   <Fragment key={tender.code}>