From 9e011d85fd307768f7cec7214ca873208574ecfb Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Fri, 28 Mar 2025 21:56:47 -0400
Subject: changed styling of search display to be wider and expand filter
 descriptions

---
 .../components/need-list/need-list.component.html  | 30 ++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

(limited to 'ufund-ui/src/app/components/need-list/need-list.component.html')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 693307f..5e9a540 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,18 +1,22 @@
 <h1>Needs List</h1>
 <div id="search-container">
-    <label for="sort">Sort by:</label>
-    <select [(ngModel)] = "sortSelection" id="sort" (change)="search(searchForm.value)" [value]="sortSelection">
-        <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
-            {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
-        </option>
-    </select>
-    <button (click)="changeSortMode(searchForm.value)">
-        {{sortMode}}
-    </button>
-    <form id="search-form" #searchForm="ngForm">
-        <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
-        <input type="reset" value="Clear" (click)="search(null)"> <br>
-    </form>
+    <section>
+        <label for="sort">Sort by: </label>
+        <select [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+            <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+                {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
+            </option>
+        </select>
+        <button (click)="changeSortMode(searchForm.value)">
+            {{sortMode}}
+        </button>
+    </section>
+    <section>
+        <form id="search-form" #searchForm="ngForm">
+            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <input type="reset" value="Clear" (click)="search(null)"> <br>
+        </form>
+    </section>
     <!--<button (click)="close()">Close</button>-->
 </div>
 
-- 
cgit v1.2.3