db selector spacing

dashboard/src/components/porter/Filter.tsx

@@ -61,6 +61,7 @@ const Filter: React.FC<Props> = ({
                 options={filter.default ? [filter.default, ...filter.options] : filter.options}
                 setValue={filter.setValue}
                 value={selectedFilterValues[filter.name]}
+                width="200px"
               />
               {i !== filters.length - 1 && <Spacer y={0.5} />}
             </React.Fragment>

dashboard/src/components/porter/Select.tsx

@@ -20,6 +20,7 @@ type Props = {
   value?: string;
   setValue?: (value: string) => void;
   prefix?: React.ReactNode;
+  width?: string;
 };
 
 const Select: React.FC<Props> = ({
@@ -31,11 +32,12 @@ const Select: React.FC<Props> = ({
   value,
   setValue,
   prefix,
+  width,
 }) => {
   return (
     <div>
       {label && <Label color={labelColor}>{label}</Label>}
-      <SelectWrapper>
+      <SelectWrapper width={width}>
         {prefix && (
           <>
             <Prefix>{prefix}</Prefix>
@@ -123,7 +125,7 @@ const Error = styled.div`
   }
 `;
 
-const SelectWrapper = styled.div`
+const SelectWrapper = styled.div<{ width: string }>`
   position: relative;
   padding-left: 10px;
   padding-right: 28px;
@@ -140,7 +142,7 @@ const SelectWrapper = styled.div`
   border-radius: 5px;
   font-size: 13px;
   overflow: hidden;
-
+  width: ${(props) => props.width};
   display: flex;
   align-items: center;
   > img {

dashboard/src/components/porter/Spacer.tsx

@@ -23,7 +23,7 @@ const Spacer: React.FC<Props> = ({
     return null
   };
 
-  const getCalcWidth = () => {
+  const getCalcWidth = (): string => {
     if (x) {
       return 15 * x + "px";
     }

dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx

@@ -29,6 +29,7 @@ import { search } from "shared/search";
 import { readableDate } from "shared/string_utils";
 import engine from "assets/computer-chip.svg";
 import databaseGrad from "assets/database-grad.svg";
+import database from "assets/database.svg";
 import grid from "assets/grid.png";
 import list from "assets/list.png";
 import notFound from "assets/not-found.png";
@@ -203,8 +204,8 @@ const DatabaseDashboard: React.FC = () => {
             }}
             prefix={
               <Container row>
-                <Image src={databaseGrad} size={15} opacity={0.6} />
-                <Spacer inline x={0.5} />
+                <Image src={database} size={15} opacity={0.5} />
+                <Spacer inline width="25px" />
                 Type
               </Container>
             }
@@ -243,7 +244,7 @@ const DatabaseDashboard: React.FC = () => {
             prefix={
               <Container row>
                 <Image src={engine} size={15} opacity={0.6} />
-                <Spacer inline x={0.5} />
+                <Spacer inline width="22px" />
                 Engine
               </Container>
             }