overlays on top of job listing not whole viewport

Author: ericbolikowski

apps/redi-talent-pool/src/pages/app/job-listing/JobListing.scss

@@ -235,17 +235,18 @@
 }
 
 .expired-job-listing-overlay {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(4px);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   z-index: 1000;
+  padding-top: 200px;
 }
 
 .expired-job-listing-message {
@@ -255,6 +256,7 @@
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 0 1rem;
 
   p {
     font-size: 1.1rem;

apps/redi-talent-pool/src/pages/app/job-listing/JobListing.tsx

@@ -261,7 +261,7 @@ export function JobListing() {
 
   return (
     <LoggedIn>
-      <div className="jobListing">
+      <div className="jobListing" style={{ position: 'relative' }}>
         {isDesktop ? (
           <>
             <JobListingHeader jobListing={jobListing} />
@@ -282,7 +282,6 @@ export function JobListing() {
                 <JobListingContact jobListing={jobListing} />
               </div>
             </div>
-            {isExpired && <ExpiredJobListingOverlay />}
           </>
         ) : (
           <>
@@ -294,9 +293,9 @@ export function JobListing() {
               <JobListingAboutTheCompany jobListing={jobListing} />
               <JobListingContact jobListing={jobListing} />
             </div>
-            {isExpired && <ExpiredJobListingOverlay />}
           </>
         )}
+        {isExpired && <ExpiredJobListingOverlay />}
       </div>
     </LoggedIn>
   )