diff --git a/.changeset/sharp-steaks-nail.md b/.changeset/sharp-steaks-nail.md
new file mode 100644
index 0000000000..96347aff77
--- /dev/null
+++ b/.changeset/sharp-steaks-nail.md
@@ -0,0 +1,7 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`SelectInput`: 
+- click outside should work in every context 
+- fix placeholder alignment when small
diff --git a/packages/ui/src/components/SelectInput/components/Dropdown.tsx b/packages/ui/src/components/SelectInput/components/Dropdown.tsx
index 76c2a58cc9..41cff7d4dc 100644
--- a/packages/ui/src/components/SelectInput/components/Dropdown.tsx
+++ b/packages/ui/src/components/SelectInput/components/Dropdown.tsx
@@ -639,6 +639,29 @@ export const Dropdown = ({
   )
   const modalContext = useContext(ModalContext)
 
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (
+        event.target instanceof Node &&
+        ref.current &&
+        !ref.current.contains(event.target) &&
+        refSelect.current &&
+        !refSelect.current.contains(event.target)
+      ) {
+        setIsDropdownVisible(false)
+      }
+    },
+    [setIsDropdownVisible, refSelect],
+  )
+
+  useEffect(() => {
+    document.addEventListener('mouseup', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside)
+    }
+  }, [handleClickOutside])
+
   useEffect(() => {
     if (refSelect.current && isDropdownVisible) {
       const position =
diff --git a/packages/ui/src/components/SelectInput/components/SelectBar.tsx b/packages/ui/src/components/SelectInput/components/SelectBar.tsx
index 9e25e38ca3..9a8c12decc 100644
--- a/packages/ui/src/components/SelectInput/components/SelectBar.tsx
+++ b/packages/ui/src/components/SelectInput/components/SelectBar.tsx
@@ -75,7 +75,6 @@ type DisplayValuesProps = {
   refPlusTag: RefObject<HTMLDivElement | null>
   displayShadowCopy?: boolean
 }
-
 const DisplayValues = ({
   refTag,
   nonOverflowedValues,