From aef6d3b41fbdb02cbe95fef6bd82473ac8d49938 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 6 Jan 2022 02:05:58 -0500
Subject: [PATCH] this is closer!

---
 .../tts_model_list/MultiDropdownSearch.tsx    | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx b/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx
index c06d10bf38..2af2d446b4 100644
--- a/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx
+++ b/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx
@@ -212,6 +212,33 @@ export function MultiDropdownSearch(props: Props) {
     );
   }
 
+  let categoryFields = [];
+  let categoryFieldGroups = [];
+
+  for (let i = 0; i < categoryDropdowns.length; i++) {
+    console.log('categoryDropdowns', i)
+    let categoryDropdown = categoryDropdowns[i];
+
+    categoryFields.push(categoryDropdown);
+
+    if (categoryFields.length >= 2) {
+      categoryFieldGroups.push(
+        <div className="field is-grouped is-grouped">
+          {categoryFields.splice(0, categoryFields.length)}
+        </div>
+      );
+    }
+  }
+
+  if (categoryFields.length >= 0) {
+    categoryFieldGroups.push(
+      <div className="field is-grouped is-grouped">
+        {categoryFields.splice(0, categoryFields.length)}
+      </div>
+    );
+  }
+
+
   const leafiestCategory = selectedCategories[selectedCategories.length - 1];
 
   let leafiestCategoryModels : Set<TtsModelListItem> = new Set();
@@ -254,8 +281,9 @@ export function MultiDropdownSearch(props: Props) {
         {/*<div className="field-label is-normal">
           <label className="label">Department</label>
         </div>*/}
-          {separatedCategoryDropdowns}
       </div>
+      
+      {categoryFieldGroups}
 
       {/*
       <div className="field is-horizontal">