From 18102bc3dbf35b7e4fedd18dd877b94d51ffa803 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 6 May 2025 13:07:59 +0200
Subject: [PATCH] Fix excessive left padding in input fields

---
 gradle/changelog/input_padding.yaml                       | 2 ++
 scm-ui/ui-core/src/base/forms/input/InputField.tsx        | 8 ++++----
 .../src/repos/codeSection/containers/FileSearch.tsx       | 3 +--
 3 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 gradle/changelog/input_padding.yaml

diff --git a/gradle/changelog/input_padding.yaml b/gradle/changelog/input_padding.yaml
new file mode 100644
index 0000000000..82cc50dfbd
--- /dev/null
+++ b/gradle/changelog/input_padding.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Excessive left padding in input fields
diff --git a/scm-ui/ui-core/src/base/forms/input/InputField.tsx b/scm-ui/ui-core/src/base/forms/input/InputField.tsx
index df7c708f5a..fe5c5b292d 100644
--- a/scm-ui/ui-core/src/base/forms/input/InputField.tsx
+++ b/scm-ui/ui-core/src/base/forms/input/InputField.tsx
@@ -15,6 +15,7 @@
  */
 
 import React from "react";
+import classNames from "classnames";
 import Field from "../base/Field";
 import Control from "../base/Control";
 import Label from "../base/label/Label";
@@ -25,7 +26,6 @@ import { useAriaId } from "../../helpers";
 
 export type InputFieldProps = {
   label: string;
-  labelClassName?: string;
   helpText?: string;
   descriptionText?: string;
   error?: string;
@@ -36,13 +36,13 @@ export type InputFieldProps = {
  * @see https://bulma.io/documentation/form/input/
  */
 const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
-  ({ name, label, helpText, descriptionText, error, icon, className, labelClassName, id, ...props }, ref) => {
+  ({ name, label, helpText, descriptionText, error, icon, className, id, ...props }, ref) => {
     const inputId = useAriaId(id ?? props.testId);
     const descriptionId = descriptionText ? `input-description-${name}` : undefined;
     const variant = error ? "danger" : undefined;
     return (
       <Field className={className}>
-        <Label htmlFor={inputId} className={labelClassName}>
+        <Label htmlFor={inputId}>
           {label}
           {helpText ? <Help className="ml-1" text={helpText} /> : null}
         </Label>
@@ -51,7 +51,7 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
             {descriptionText}
           </p>
         ) : null}
-        <Control className="has-icons-left">
+        <Control className={classNames({ "has-icons-left": icon })}>
           <Input variant={variant} ref={ref} id={inputId} aria-describedby={descriptionId} {...props}></Input>
           {icon ? (
             <span className="icon is-small is-left">
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
index 822b34219c..3e8b99dc8f 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
@@ -187,9 +187,8 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
           <InputField
             autoFocus={true}
             placeholder={t("fileSearch.input.placeholder")}
-            className="is-full-width is-flex pr-2"
+            className="is-full-width is-flex pr-2 ml-2"
             label=""
-            labelClassName="mr-2 mt-2"
             defaultValue={query}
             aria-describedby={fileSearchDescriptionId}
             testId="file_search_filter_input"