diff --git a/src/components/PopoutPanel.css b/src/components/PopoutPanel.css index 4d28463..46e2549 100644 --- a/src/components/PopoutPanel.css +++ b/src/components/PopoutPanel.css @@ -22,6 +22,12 @@ display: block; } +.panel-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} /* Mobile responsiveness */ @media (max-width: 768px) { @@ -39,9 +45,6 @@ /* Close button adjustments for mobile */ .close-btn { - position: absolute; - top: 10px; - right: 15px; background-color: #dc3545; color: #fff; border: none; @@ -51,6 +54,17 @@ z-index: 1001; /* Keep button above the panel */ } +.plan-path-btn { + background-color: #4A90E2; + color: white; + border: none; + padding: 10px 15px; + cursor: pointer; + font-size: 16px; + border-radius: 5px; + text-align: center; +} + /* Job Description and Expected Tasks section */ .section { margin-bottom: 20px; diff --git a/src/components/PopoutPanel.js b/src/components/PopoutPanel.js index 18d9923..0ece026 100644 --- a/src/components/PopoutPanel.js +++ b/src/components/PopoutPanel.js @@ -87,9 +87,14 @@ function PopoutPanel({ return (
- -

{title}

+ {/* Header with Close & Plan My Path Buttons */} +
+ + +
+

{title}

+ {/* Job Description and Tasks */}

Job Description