feat: style selectors

Author: strallia

src/components/TotalOrgSummary/VolunteerTrendsLineChart/VolunteerTrendsLineChart.jsx

@@ -202,7 +202,7 @@ export default function VolunteerTrendsLineChart({ darkMode }) {
 
   return (
     <div className="chart-container">
-      {/* DATE FILTER */}
+      {/* DATE FILTERS */}
       <div className="date-filter-container">
         <select name="timeframe-filter" id="timeframe-filter" onChange={setTimeframeFilter}>
           <option value="years1">This year</option>

src/components/TotalOrgSummary/VolunteerTrendsLineChart/styles.css

@@ -1,9 +1,3 @@
-select {
- width: 200px;
- justify-self: center;
- margin-top: 15px;
-}
-
 .date-picker-container {
   position: relative;
 }
@@ -21,6 +15,7 @@ select {
   text-align: center;
   padding: 10px;
   position: relative;
+  margin-top: 15px;
 }
 
 .custom-date-range {
@@ -31,6 +26,18 @@ select {
  font-weight: bold;
 }
 
+.date-filter-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+
+.date-filter-container > select {
+  margin-top: 0;
+  width: min-content
+}
+
 @media (max-width: 500px) {
   .chart-container {
     justify-content: start;