Styling

uktrade · Jan 3, 2024 · 23857c6 · 23857c6
1 parent 7912796
commit 23857c6
Showing 1 changed file with 30 additions and 17 deletions.
diff --git a/src/client/components/Dashboard/my-tasks/MyTasks.jsx b/src/client/components/Dashboard/my-tasks/MyTasks.jsx
@@ -23,13 +23,23 @@ const FiltersContainer = styled.div`
   column-gap: 2px;
   margin-bottom: ${SPACING.SCALE_3};
 
-  grid-template-columns: repeat(3, ${SELECT_WIDTH}) 35.5% ${SELECT_WIDTH};
+  grid-template-columns: repeat(4, ${SELECT_WIDTH}) 19.5% ${SELECT_WIDTH};
   @media (max-width: ${SITE_WIDTH}) {
     grid-template-columns: repeat(2, 50%);
     span.task-select-spacer {
       display: none;
     }
   }
+
+  #field-company {
+    input {
+      padding: 6px 4px 7px;
+    }
+
+    label {
+      padding-bottom: 3px;
+    }
+  }
 `
 
 function mapSelectedCompanyFilters(selectedFilters, companies) {
@@ -67,28 +77,31 @@ export const MyTasksContent = ({ myTasks, filters, selectedFilters }) => (
             qsParam="created_by"
             options={filters?.createdBy?.options}
           />
+          <div id="company-filter">
+            <Filters.Typeahead
+              isMulti={true}
+              closeMenuOnSelect={true}
+              label="Company"
+              name="company"
+              qsParam="company"
+              placeholder="Search company"
+              options={companies.map((company) => ({
+                label: company.name,
+                value: company.id,
+              }))}
+              selectedOptions={mapSelectedCompanyFilters(
+                selectedFilters,
+                companies
+              )}
+              data-test="company-filter"
+            />
+          </div>
           <span class="task-select-spacer" id="task-select-spacer" />
           <TaskListSelect
             label="Sort by"
             qsParam="sortby"
             options={filters?.sortby?.options}
           />
-          <Filters.Typeahead
-            isMulti={true}
-            label="Company"
-            name="company"
-            qsParam="company"
-            placeholder="Search company"
-            options={companies.map((company) => ({
-              label: company.name,
-              value: company.id,
-            }))}
-            selectedOptions={mapSelectedCompanyFilters(
-              selectedFilters,
-              companies
-            )}
-            data-test="company-filter"
-          />
         </FiltersContainer>
       )}
     </TaskCompaniesAndProjectsResource>