Arrange elements in dropdowns in vertical order instead of horizontal

The framework list is currently arranged like:

A B C
D E F

This patch changes it to:

A C E
B D F

This makes it easier to scan through the list in alphabetical order when
looking for a certain name.

The implementation is done with CSS multi-column layouts. There seems to be
some caveats in the browser support table [1], but this patch only uses the
basic part, so it should be OK.

[1] https://caniuse.com/multicolumn

Author: ishitatsuyuki

webdriver-ts-results/src/App.css

@@ -94,11 +94,7 @@ input + label {
 }
 
 .grid {
-    display: flex;
-    flex-wrap: wrap;
-}
-.col-3 {
-    width: 33%;
+    column-count: 3;
 }
 
 .hspan {

webdriver-ts-results/src/selection/DropDownContents.tsx

@@ -6,18 +6,19 @@ interface Props<T> {
   selectAll: (event: React.SyntheticEvent) => void;
   isNoneSelected: boolean;
   areAllSelected: boolean;
+  grid?: boolean;
 }
 
 export function DropDownContents<T>(props: Props<T>) {
-  const {selectNone, selectAll, isNoneSelected, areAllSelected, children} = props;
+  const {selectNone, selectAll, isNoneSelected, areAllSelected, children, grid = false} = props;
   return <div className="section">
             {children[0]}
             <div className="float-rt">
                 {!isNoneSelected ? <button className='textButton' onClick={selectNone}>None</button> : <button disabled={true} className='textButton'>None</button>}
                 &nbsp;
                 {!areAllSelected ? <button className='textButton' onClick={selectAll}>All</button> : <button disabled={true} className='textButton'>All</button>}
             </div>
-            <div className="grid">
+            <div className={grid ? "grid" : ""}>
                 {children[1]}
             </div>
         </div>;

webdriver-ts-results/src/selection/SelectFrameworks.tsx

@@ -16,7 +16,7 @@ export const SelectBarFrameworks = ({frameworks, isSelected, select}: Props) =>
   return (
       <>
         {frameworks.map(item =>
-            <div key={item.name} className="col-3">
+            <div key={item.name}>
                 <input className="form-check-input" id={'inp-'+item.name+'-'+item.type}
                     type="checkbox"
                     onChange={(evt) => select(item, evt.target.checked)}
@@ -42,11 +42,11 @@ const SelectFrameworks = () => {
   const areAllNoneKeyedSelected = useSelector<State, boolean>(state => areAllFrameworksSelected(state, FrameworkType.NON_KEYED));
 
   return <DropDown label="Which frameworks?" width='1024px'>
-            <DropDownContents isNoneSelected={isNoneKeyedSelected} areAllSelected={areAllKeyedSelected}  selectNone={() => dispatch(selectAllFrameworks(FrameworkType.KEYED, false))} selectAll={() => dispatch(selectAllFrameworks(FrameworkType.KEYED, true))}>
+            <DropDownContents grid isNoneSelected={isNoneKeyedSelected} areAllSelected={areAllKeyedSelected}  selectNone={() => dispatch(selectAllFrameworks(FrameworkType.KEYED, false))} selectAll={() => dispatch(selectAllFrameworks(FrameworkType.KEYED, true))}>
                 <h3>Keyed frameworks:</h3>
                 <SelectBarFrameworks isSelected={(framework) => selectedFrameworks.has(framework)} select={(framework, add) => dispatch(selectFramework(framework, add))} frameworks={frameworksKeyed} />
             </DropDownContents>
-            <DropDownContents isNoneSelected={isNoneNonKeyedSelected} areAllSelected={areAllNoneKeyedSelected} selectNone={() => dispatch(selectAllFrameworks(FrameworkType.NON_KEYED, false))} selectAll={() => dispatch(selectAllFrameworks(FrameworkType.NON_KEYED, true))}>
+            <DropDownContents grid isNoneSelected={isNoneNonKeyedSelected} areAllSelected={areAllNoneKeyedSelected} selectNone={() => dispatch(selectAllFrameworks(FrameworkType.NON_KEYED, false))} selectAll={() => dispatch(selectAllFrameworks(FrameworkType.NON_KEYED, true))}>
                 <h3>Non-keyed frameworks:</h3>
                 <SelectBarFrameworks isSelected={(framework) => selectedFrameworks.has(framework)} select={(framework, add) => dispatch(selectFramework(framework, add))} frameworks={frameworksNonKeyed} />
             </DropDownContents>