From a2566247fa15b22db23e304e76f8f8a7a26be671 Mon Sep 17 00:00:00 2001
From: Josh <jcoakley@aptivaai.com>
Date: Tue, 23 Sep 2025 15:01:10 +0000
Subject: [PATCH] Fixed careermodal buttons for mobile

---
 .build.hash                   |  2 +-
 src/components/CareerModal.js | 39 ++++++++++++++++-------------------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/.build.hash b/.build.hash
index a638fb5..e82019a 100644
--- a/.build.hash
+++ b/.build.hash
@@ -1 +1 @@
-ba1c2fbda874bcd3f92bedd8442c050c23d03fb9-372bcf506971f56c4911b429b9f5de5bc37ed008-e9eccd451b778829eb2f2c9752c670b707e1268b
+3b3a4e535d5d23a7ef8d6ec6fd65f022a60f3105-372bcf506971f56c4911b429b9f5de5bc37ed008-e9eccd451b778829eb2f2c9752c670b707e1268b
diff --git a/src/components/CareerModal.js b/src/components/CareerModal.js
index 2edc64b..641b3b1 100644
--- a/src/components/CareerModal.js
+++ b/src/components/CareerModal.js
@@ -78,30 +78,14 @@ if (!careerDetails || careerDetails.salaryData === undefined) {
   </div>
 )}
 
-        {/* Title row */}
-        <div className="flex justify-between items-center mb-4 pb-2 border-b">
-          <div>
+        {/* Title row (title left, actions right) */}
+        <div className="mb-4 pb-2 border-b">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
             <h2 className="text-2xl font-bold text-blue-600">
               {careerDetails.title}
             </h2>
-            
-           {/* AI RISK SECTION */}
-
-              {aiRisk && aiRisk.riskLevel && aiRisk.reasoning && (
-                <div className="text-sm text-gray-500 mt-1">
-                  <strong>AI Risk Level:</strong> {aiRisk.riskLevel}
-                  <br />
-                  <span>{aiRisk.reasoning}</span>
-                </div>
-              )}
-
-              {!aiRisk && (
-                <p className="text-sm text-gray-500 mt-1">No AI risk data available</p>
-              )}
-          </div>
-
-          {/* Buttons */}
-          <div className="flex gap-2">
+            {/* Buttons (kept on same row as title on sm+, stacked under title on xs) */}
+            <div className="flex gap-2 self-start sm:self-auto">
             <button
               onClick={() => {
                 const stabilityRating = calculateStabilityRating(
@@ -126,7 +110,20 @@ if (!careerDetails || careerDetails.salaryData === undefined) {
             >
               Close
             </button>
+           </div>
           </div>
+
+          {/* AI RISK SECTION (moved below title/actions so it spans full width and doesn't squish) */}
+          {aiRisk && aiRisk.riskLevel && aiRisk.reasoning && (
+            <div className="text-sm text-gray-500 mt-2">
+              <strong>AI Risk Level:</strong> {aiRisk.riskLevel}
+              <br />
+              <span>{aiRisk.reasoning}</span>
+            </div>
+          )}
+          {!aiRisk && (
+            <p className="text-sm text-gray-500 mt-2">No AI risk data available</p>
+          )}
         </div>
 
         {/* Job Description */}