From 48219a464cae065ba4919080429af9f0aea36357 Mon Sep 17 00:00:00 2001
From: Josh <jcoakley@aptivaai.com>
Date: Tue, 11 Mar 2025 18:06:31 +0000
Subject: [PATCH] Some UI adjustments to school filters - needs more

---
 src/components/PopoutPanel.css | 59 ++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/src/components/PopoutPanel.css b/src/components/PopoutPanel.css
index b6f1899..33ca52d 100644
--- a/src/components/PopoutPanel.css
+++ b/src/components/PopoutPanel.css
@@ -100,12 +100,71 @@
   color: #666;
 }
 
+/* Filter controls syling*/
 .filter-controls {
   display: flex;
   align-items: center;
   gap: 20px;
 }
 
+.filter-controls input[type="radio"] {
+  margin-right: 5px;  /* Make radio buttons closer to the label */
+  vertical-align: middle;
+}
+
+.filter-controls label {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Adjust radio button alignment */
+.filter-controls label {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.filter-controls input[type="radio"] {
+  margin-right: 5px;  /* Make radio buttons closer to the label */
+  vertical-align: middle;
+}
+
+/* Space between Tuition and Distance sliders */
+.slider-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 30px; /* Add space between the sliders */
+}
+
+.slider-container input[type="range"] {
+  width: 45%; /* Allow equal width for both sliders */
+  margin: 0;
+}
+
+.range-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+}
+
+/* Style for the range slider to show min/max values */
+.range-slider-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Space between Tuition and Distance sliders */
+.range-slider-wrapper input {
+  width: 48%;  /* Make both sliders occupy 48% space to leave space between them */
+}
+
 /* Schools section: Grid layout with clear separation */
 .schools-offering {
   display: grid;