use flex display per filter

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

arduino-ide-extension/src/browser/style/list-widget.css

@@ -23,6 +23,16 @@
     padding: 0px 5px 0px 0px;
 }
 
+.arduino-list-widget .filter-bar .filter {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+}
+
+.arduino-list-widget .filter-bar .filter > * {
+    flex-grow: 1;
+}
+
 .filterable-list-container {
     display: flex;
     flex-direction: column;

arduino-ide-extension/src/browser/widgets/component-list/filter-renderer.tsx

@@ -18,7 +18,7 @@ export abstract class FilterRenderer<S extends Searchable.Options> {
         {Object.entries(options)
           .filter(([prop]) => props.includes(prop as keyof S))
           .map(([prop, value]) => (
-            <div key={prop}>
+            <div key={prop} className="filter">
               {this.propertyLabel(prop as keyof S)}:
               <select
                 className="theia-select"