Fixed UI issues with popoutpanel filters

src/components/PopoutPanel.js

@@ -150,52 +150,59 @@ function PopoutPanel({
         )}
       </div>
 
-      {/* Sorting & Filtering UI */}
-      {/* Sorting UI */}
-      <div className="filter-container">
-        <div className="filter-group">
-          <label htmlFor="sort-by">Sort by:</label>
-          <select
-            id="sort-by"
-            value={sortBy}
-            onChange={(e) => setSortBy(e.target.value)}
-          >
-            <option value="tuition">Tuition</option>
-            <option value="distance">Distance</option>
-          </select>
-        </div>
-
-        <div className="filter-group">
-          <label htmlFor="tuition-range">Max Tuition:</label>
-          <input
-            type="range"
-            id="tuition-range"
-            min="0"
-            max="100000"
-            step="1000"
-            value={maxTuition}
-            onChange={(e) => setMaxTuition(Number(e.target.value))}
-          />
-          <span>{`$0 - $${maxTuition.toLocaleString()}`}</span>
-        </div>
-
-        <div className="filter-group">
-          <label htmlFor="distance-range">Max Distance (mi):</label>
-          <input
-            type="range"
-            id="distance-range"
-            min="0"
-            max="1000"
-            step="10"
-            value={maxDistance}
-            onChange={(e) => setMaxDistance(Number(e.target.value))}
-          />
-          <span>{`${maxDistance} mi`}</span>
-        </div>
-      </div>
 
       {/* Schools Offering Programs Section */}
       <h3>Schools Offering Programs</h3>
+
+      <div className="schools-offering-container">
+  {/* Header and Filters - Not part of grid */}
+  <div className="schools-header" style={{ 
+      display: 'flex', 
+      alignItems: 'center', 
+      marginBottom: '10px', 
+      justifyContent: 'center',
+      alignItems: 'center',    }}>
+
+    <div className="compact-filters" style={{ display: 'flex', gap: '15px', justifyContent: 'center', alignItems: 'center' }}>
+      <label>
+        Sort:
+        <select
+          value={sortBy}
+          onChange={(e) => setSortBy(e.target.value)}
+          style={{ marginLeft: '5px', padding: '2px', width: '100px' }}
+        >
+          <option value="tuition">Tuition</option>
+          <option value="distance">Distance</option>
+        </select>
+      </label>
+
+      <label>
+        Tuition (max):
+        <input
+          type="number"
+          value={maxTuition}
+          step={1000}
+          min={0}
+          max={100000}
+          style={{ width: '90px', padding: '2px' }}
+          onChange={(e) => setMaxTuition(Number(e.target.value))}
+        />
+      </label>
+
+      <label>
+        Distance (max mi):
+        <input
+          type="number"
+          value={maxDistance}
+          step={10}
+          min={10}
+          max={500}
+          style={{ width: '70px', padding: '2px' }}
+          onChange={(e) => setMaxDistance(Number(e.target.value))}
+        />
+      </label>
+    </div>
+  </div>
       <div className="schools-offering">
       {filteredAndSortedSchools.length > 0 ? (
         filteredAndSortedSchools.map((school, index) => (
@@ -214,6 +221,7 @@ function PopoutPanel({
           <p className="no-schools-message">No schools of higher education are available in your state for this career path.</p>
         )}
       </div>
+    </div>
 
             {/* Loan Repayment Analysis */}
       <h3>Loan Repayment Analysis</h3>