diff --git a/ui-core/src/components/inputs/FieldWrapper.tsx b/ui-core/src/components/inputs/FieldWrapper.tsx
index 5efe1199f..d011a728e 100644
--- a/ui-core/src/components/inputs/FieldWrapper.tsx
+++ b/ui-core/src/components/inputs/FieldWrapper.tsx
@@ -15,6 +15,11 @@ export type FieldWrapperProps = {
   disabled?: boolean;
   statusWithMessage?: StatusWithMessage;
   statusIconPosition?: 'next-to-field' | 'before-status-message';
+  /**
+   * Input without any wrapper padding.
+   * Should not be used with required or statusWithMessage with no tooltip.
+   */
+  narrow?: boolean;
   small?: boolean;
   children?: React.ReactNode;
   className?: string;
@@ -29,15 +34,21 @@ const FieldWrapper = ({
   disabled,
   statusWithMessage,
   statusIconPosition = 'next-to-field',
+  narrow = false,
   small = false,
   className,
   children,
   onCloseStatusMessage,
 }: FieldWrapperProps) => {
   const statusClassname = statusWithMessage ? { [statusWithMessage.status]: true } : {};
+  const defaultTooltip: StatusWithMessage['tooltip'] = narrow ? 'left' : undefined;
+
+  if (narrow && required) {
+    throw new Error('narrow should not be used with required for now. This breaks the input UI.');
+  }
 
   return (
-    <div className={cx('feed-back', statusClassname, className, { small: small })}>
+    <div className={cx('feed-back', statusClassname, className, { small, narrow })}>
       <div className="custom-field">
         {/* LABEL AND HINT */}
         {label && (
@@ -68,7 +79,10 @@ const FieldWrapper = ({
         {statusWithMessage && (
           <StatusMessage
             small={small}
-            statusWithMessage={statusWithMessage}
+            statusWithMessage={{
+              ...statusWithMessage,
+              tooltip: statusWithMessage?.tooltip ?? defaultTooltip,
+            }}
             showIcon={statusIconPosition === 'before-status-message'}
             onClose={onCloseStatusMessage}
           />
diff --git a/ui-core/src/components/inputs/Input.tsx b/ui-core/src/components/inputs/Input.tsx
index e508cc16b..cd5ce1ddd 100644
--- a/ui-core/src/components/inputs/Input.tsx
+++ b/ui-core/src/components/inputs/Input.tsx
@@ -66,6 +66,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       disabled = false,
       readOnly = false,
       statusWithMessage,
+      narrow,
       inputFieldWrapperClassname = '',
       small = false,
       withIcons = [],
@@ -87,7 +88,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         required={required}
         small={small}
-        statusIconPosition={statusWithMessage?.tooltip ? 'before-status-message' : undefined}
+        statusIconPosition={
+          statusWithMessage?.tooltip || narrow ? 'before-status-message' : undefined
+        }
+        narrow={narrow}
         className={cx('input-field-wrapper', inputFieldWrapperClassname)}
         onCloseStatusMessage={onCloseStatusMessage}
       >
diff --git a/ui-core/src/stories/ComboBox.stories.tsx b/ui-core/src/stories/ComboBox.stories.tsx
index 91e155491..5d499cdab 100644
--- a/ui-core/src/stories/ComboBox.stories.tsx
+++ b/ui-core/src/stories/ComboBox.stories.tsx
@@ -67,6 +67,15 @@ export const Default: Story = {
   args: {
     label: 'Your name',
     type: 'text',
+    narrow: false,
+  },
+};
+
+export const Narrow: Story = {
+  args: {
+    label: 'Your name',
+    type: 'text',
+    narrow: true,
   },
 };
 
diff --git a/ui-core/src/stories/Input.stories.tsx b/ui-core/src/stories/Input.stories.tsx
index 27884955f..816a4c4c9 100644
--- a/ui-core/src/stories/Input.stories.tsx
+++ b/ui-core/src/stories/Input.stories.tsx
@@ -188,6 +188,20 @@ export const TooltipErrorInput: Story = {
   },
 };
 
+export const TooltipWarningNarrowInput: Story = {
+  args: {
+    label: 'Name',
+    type: 'text',
+    value: 'This is a narrow input',
+    statusWithMessage: {
+      status: 'warning',
+      message:
+        "My wrapper doesn't have any padding. Don't use me with 'required' or 'statusWithMessage' with no tooltip.",
+    },
+    narrow: true,
+  },
+};
+
 export const TooltipInfoInput: Story = {
   args: {
     label: 'Name',
diff --git a/ui-core/src/styles/inputs/comboBox.css b/ui-core/src/styles/inputs/comboBox.css
index c9f244bad..503439bb9 100644
--- a/ui-core/src/styles/inputs/comboBox.css
+++ b/ui-core/src/styles/inputs/comboBox.css
@@ -22,6 +22,12 @@
       0px 3px 5px -2px rgba(0, 0, 0, 0.1);
   }
 
+  &:has(.narrow) .suggestions-list {
+    top: calc(100% - 7px);
+    left: 0;
+    width: calc(100% - 4px);
+  }
+
   .suggestion-item {
     padding: 0.688rem 1.188rem 0.813rem;
     cursor: pointer;
diff --git a/ui-core/src/styles/inputs/fieldWrapper.css b/ui-core/src/styles/inputs/fieldWrapper.css
index bcd0022aa..9c0a1df27 100644
--- a/ui-core/src/styles/inputs/fieldWrapper.css
+++ b/ui-core/src/styles/inputs/fieldWrapper.css
@@ -22,6 +22,10 @@
     @apply bg-error-5;
   }
 
+  &.narrow {
+    padding: 0;
+  }
+
   .custom-field {
     position: relative;