Fix for CareerSearch bar below Priorities modal

Dockerfile.server2

@@ -9,8 +9,8 @@ RUN apt-get update -y && \
 # ---------------------------
 
 COPY package*.json ./
-RUN npm ci --unsafe-perm
-COPY public/ /app/public/          
+COPY public/ /app/public/  
+RUN npm ci --unsafe-perm        
 COPY . .
 
 CMD ["node", "backend/server2.js"]

src/components/CareerExplorer.js

@@ -903,6 +903,7 @@ const handleSelectForEducation = (career) => {
           Explore Careers - use these tools to find your best fit
         </h2>
         <CareerSearch
+          disabled={showModal}
           onCareerSelected={(careerObj) => {
             console.log('[Dashboard] onCareerSelected =>', careerObj);
             setPendingCareerForModal(careerObj);

src/components/CareerPrioritiesModal.js

@@ -71,8 +71,8 @@ const CareerPrioritiesModal = ({ userProfile, onClose }) => {
   const allAnswered = questions.every(q => responses[q.id]);
 
   return (
-    <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex justify-center items-center">
-      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl overflow-y-auto max-h-[90vh]">
+    <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex justify-center items-center z-50">
+      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl overflow-y-auto max-h-[90vh] z-60">
         <h2 className="text-xl font-bold mb-4">Tell us what's important to you</h2>
         {questions.map(q => (
           <div key={q.id} className="mb-4">

src/components/CareerSearch.js

@@ -12,10 +12,11 @@ const normalize = (s = '') =>
     .trim();
 
 /* ---------- component ---------- */
-const CareerSearch = ({ onCareerSelected, required }) => {
+const CareerSearch = ({ onCareerSelected, required, disabled: externallyDisabled = false }) => {
   const [careerObjects, setCareerObjects] = useState([]);
   const [searchInput, setSearchInput]     = useState('');
   const [selectedObj,  setSelectedObj]    = useState(null);   // ✓ state
+  const computedDisabled = externallyDisabled || !!selectedObj;
 
   /* fetch & de-dupe once */
   useEffect(() => {
@@ -57,6 +58,7 @@ const CareerSearch = ({ onCareerSelected, required }) => {
 
   /* allow “Enter” to commit first suggestion */
   const handleKeyDown = (e) => {
+    if (computedDisabled) return; 
     if (e.key === 'Enter') {
       const first = careerObjects.find(o =>
         normalize(o.title).startsWith(normalize(searchInput))
@@ -86,19 +88,21 @@ const CareerSearch = ({ onCareerSelected, required }) => {
           list="career-titles"
           value={searchInput}
           required={required}
-          disabled={!!selectedObj}      // lock when chosen
+          disabled={computedDisabled}      // lock when chosen
           onChange={(e) => setSearchInput(e.target.value)}
           onKeyDown={handleKeyDown}
-          className="w-full border rounded p-2 disabled:bg-gray-100"
+          className={`w-full border rounded p-2
+                      ${computedDisabled ? 'bg-gray-100 cursor-not-allowed opacity-60' : ''}`}
           placeholder="Start typing a career..."
         />
 
-        {selectedObj && (
-          <Check
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-green-600"
-            size={20}
-          />
-        )}
+        {!computedDisabled && (
+         <datalist id="career-titles">
+           {careerObjects.map((o) => (
+             <option key={o.soc_code} value={o.title} />
+           ))}
+         </datalist>
+       )}
       </div>
 
       {!selectedObj && (
@@ -110,7 +114,7 @@ const CareerSearch = ({ onCareerSelected, required }) => {
       )}
 
       {/* change / clear link */}
-      {selectedObj && (
+      {selectedObj && !externallyDisabled && (
         <button
           type="button"
           onClick={reset}