aED

src/components/matches/MatchesProfilesTab.jsx

@@ -315,8 +315,12 @@ export default function MatchesInterface() {
   return (
 
      <>
-    <div className="grid grid-cols-1  md:grid-cols-[300px_auto]  md:px-4 gap-2 md:gap-10">
-      <style>{`
+
+     <section 
+     className="h-[100vh] overflow-visible"
+     >
+    <div className="grid grid-cols-1  md:grid-cols-[300px_auto]  md:px-4 gap-2 md:gap-10" >
+      {/* <style>{`
         .scrollbar-hide::-webkit-scrollbar {
           display: none;
         }
@@ -324,12 +328,13 @@ export default function MatchesInterface() {
           -ms-overflow-style: none;
           scrollbar-width: none;
         }
-      `}</style>
+      `}</style> */}
 
       {/* Left Sidebar - Fixed on desktop, scrollable on mobile */}
       <div
-        style={{ maxHeight: "100vh", position: "sticky", top: "50px" }}
-        className="w-full rounded-[10px] border border-1 border-gray-200 md:w-80 bg-white md:my-6 shadow-lg overflow-y-auto scrollbar-hide flex-shrink-0"
+        style={{ top: "100px", alignSelf: "flex-start" }}
+        className=" h-[fit-content] w-full rounded-[10px] border border-1 border-gray-200 md:w-80 bg-white md:my-6 
+        shadow-lg sticky  self-start"
       >
         <div className="py-6 px-4">
           {tabs.map((tab) => {
@@ -405,7 +410,7 @@ export default function MatchesInterface() {
       </div>
 
       {/* Right Content Area - Scrollable */}
-      <div className=" px-2 py-8">
+      <div className=" px-2 py-8 ">
         <div className="w-[100%] max-w-[1200px] mx-auto">
           <div className="flex justify-between gap-2 itemes-center mb-8">
             <h1 className="text-[24px] font-bold text-gray-900 ">
@@ -432,7 +437,7 @@ export default function MatchesInterface() {
 
 
 
-
+</section>