From 77a2200020b2f64496c925408d94caa27ff469bf Mon Sep 17 00:00:00 2001
From: jusrhee <justin@porter.run>
Date: Mon, 12 Feb 2024 17:54:21 -0500
Subject: [PATCH 1/2] db selector spacing

---
 dashboard/src/components/porter/Filter.tsx                | 1 +
 dashboard/src/components/porter/Select.tsx                | 8 +++++---
 dashboard/src/components/porter/Spacer.tsx                | 2 +-
 .../main/home/database-dashboard/DatabaseDashboard.tsx    | 7 ++++---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/porter/Filter.tsx b/dashboard/src/components/porter/Filter.tsx
index 33f20647fd..734c59a437 100644
--- a/dashboard/src/components/porter/Filter.tsx
+++ b/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>
diff --git a/dashboard/src/components/porter/Select.tsx b/dashboard/src/components/porter/Select.tsx
index 0ad3fc5ef0..778cc8027d 100644
--- a/dashboard/src/components/porter/Select.tsx
+++ b/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 {
diff --git a/dashboard/src/components/porter/Spacer.tsx b/dashboard/src/components/porter/Spacer.tsx
index c39101a7a0..acc6554dda 100644
--- a/dashboard/src/components/porter/Spacer.tsx
+++ b/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";
     }
diff --git a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx b/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx
index ca6c5cf023..233ef93420 100644
--- a/dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx
+++ b/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>
             }

From 6a1587af14e44492a34a60cb58a15b729ffbaebb Mon Sep 17 00:00:00 2001
From: jusrhee <justin@porter.run>
Date: Mon, 12 Feb 2024 17:58:05 -0500
Subject: [PATCH 2/2] width on selectwrapper

---
 dashboard/src/components/porter/Select.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/porter/Select.tsx b/dashboard/src/components/porter/Select.tsx
index 778cc8027d..7219a50868 100644
--- a/dashboard/src/components/porter/Select.tsx
+++ b/dashboard/src/components/porter/Select.tsx
@@ -125,7 +125,7 @@ const Error = styled.div`
   }
 `;
 
-const SelectWrapper = styled.div<{ width: string }>`
+const SelectWrapper = styled.div<{ width?: string }>`
   position: relative;
   padding-left: 10px;
   padding-right: 28px;