Improve diverse form features

- General responsiveness
- Resize select component
- Fix datepicker for dark themes
- Make success notification configurable

Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

Reviewed-by: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-forms/src/select/ControlledSelectField.tsx

@@ -28,6 +28,7 @@ import { useScmFormContext } from "../ScmFormContext";
 import SelectField from "./SelectField";
 import { useScmFormPathContext } from "../FormPathContext";
 import { prefixWithoutIndices } from "../helpers";
+import classNames from "classnames";
 
 type Props<T extends Record<string, unknown>> = Omit<
   ComponentProps<typeof SelectField>,
@@ -46,6 +47,7 @@ function ControlledSelectField<T extends Record<string, unknown>>({
   testId,
   defaultValue,
   readOnly,
+  className,
   ...props
 }: Props<T>) {
   const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
@@ -65,6 +67,7 @@ function ControlledSelectField<T extends Record<string, unknown>>({
           form={formId}
           readOnly={readOnly ?? formReadonly}
           required={rules?.required as boolean}
+          className={classNames("column", className)}
           {...props}
           {...field}
           label={labelTranslation}

scm-ui/ui-forms/src/select/SelectField.tsx

@@ -51,7 +51,7 @@ const SelectField = React.forwardRef<HTMLSelectElement, Props>(
           {helpText ? <Help className="ml-1" text={helpText} /> : null}
         </Label>
         <Control>
-          <Select id={selectId} variant={variant} ref={ref} {...props}></Select>
+          <Select id={selectId} variant={variant} ref={ref} className="is-full-width" {...props}></Select>
         </Control>
         {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
       </Field>