diff --git a/src/cloud/components/Props/Pickers/UrlSelect.tsx b/src/cloud/components/Props/Pickers/UrlSelect.tsx
index da4fac0e57..7105d3a2ed 100644
--- a/src/cloud/components/Props/Pickers/UrlSelect.tsx
+++ b/src/cloud/components/Props/Pickers/UrlSelect.tsx
@@ -90,9 +90,18 @@ const UrlSelect = ({
     )
   }, [value])
 
+  const openSelectorIfEmpty = useCallback(
+    (e) => {
+      openSelector(e)
+      e.preventDefault()
+    },
+    [openSelector]
+  )
+
   return (
     <UrlSelectContainer>
       <PropertyValueButton
+        onClick={(e) => openSelectorIfEmpty(e)}
         sending={sending}
         isReadOnly={isReadOnly}
         disabled={disabled}
@@ -100,8 +109,7 @@ const UrlSelect = ({
         className='url__button'
         tag='div'
       >
-        <Flexbox justifyContent='space-between'>
-          {labelNode}
+        <Flexbox justifyContent='flex-end'>
           {!isReadOnly && !disabled && (
             <Button
               variant='bordered'
@@ -114,6 +122,7 @@ const UrlSelect = ({
           )}
         </Flexbox>
       </PropertyValueButton>
+      {labelNode}
     </UrlSelectContainer>
   )
 }
@@ -121,14 +130,20 @@ const UrlSelect = ({
 export default UrlSelect
 
 const UrlSelectContainer = styled.div`
+  position: relative;
+
   .url-select__label {
-    padding: 0px;
+    position: absolute;
+    justify-self: center;
+    top: 50%;
+    transform: translateY(-50%);
+
+    padding: 0 0 0 ${({ theme }) => theme.sizes.spaces.sm}px;
     border-radius: 4px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     line-height: 25px;
-    width: 100%;
 
     &.url-select__label--incorrect {
       color: ${({ theme }) => theme.colors.text.subtle};