19064: fix the spacing around the input in custom properties right panel (#19132)

* fix the spacing around the input in custom properties right panel

* remove unwanted css

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyInput.tsx

@@ -48,7 +48,7 @@ export const PropertyInput: FC<PropertyInputProps> = ({
     <InlineEdit isLoading={isLoading} onCancel={onCancel} onSave={handleSave}>
       <Input
         allowClear
-        className="w-64"
+        className="w-full"
         data-testid="value-input"
         id="value"
         name={propertyName}

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx

@@ -187,7 +187,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
   const getPropertyInput = () => {
     const commonStyle: CSSProperties = {
       marginBottom: '0px',
-      minWidth: '250px',
+      width: '100%',
     };
     switch (propertyType.name) {
       case 'string':
@@ -314,11 +314,11 @@ export const PropertyValue: FC<PropertyValueProps> = ({
               <Form.Item name="dateTimeValue" style={commonStyle}>
                 <DatePicker
                   allowClear
+                  className="w-full"
                   data-testid="date-time-picker"
                   disabled={isLoading}
                   format={format}
                   showTime={propertyType.name === 'dateTime-cp'}
-                  style={{ width: '250px' }}
                 />
               </Form.Item>
             </Form>
@@ -359,10 +359,10 @@ export const PropertyValue: FC<PropertyValueProps> = ({
               <Form.Item name="time" style={commonStyle}>
                 <TimePicker
                   allowClear
+                  className="w-full"
                   data-testid="time-picker"
                   disabled={isLoading}
                   format={format}
-                  style={{ width: '250px' }}
                 />
               </Form.Item>
             </Form>
@@ -905,7 +905,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
 
         return (
           <div
-            className="d-flex justify-between"
+            className="d-flex justify-center flex-wrap gap-3"
             data-testid="time-interval-value">
             <div className="d-flex flex-column gap-2 items-center">
               <StartTimeIcon height={30} width={30} />

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less

@@ -94,5 +94,6 @@
 }
 
 .custom-property-inline-edit-container {
+  width: 100%;
   overflow-x: scroll;
 }

openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/InlineEdit.component.tsx

@@ -14,6 +14,7 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { Button, Space } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
+import './inline-edit.less';
 import { InlineEditProps } from './InlineEdit.interface';
 
 const InlineEdit = ({
@@ -28,7 +29,8 @@ const InlineEdit = ({
 }: InlineEditProps) => {
   return (
     <Space
-      className={classNames(className, 'w-full')}
+      wrap
+      className={classNames(className, 'inline-edit-container')}
       data-testid="inline-edit-container"
       direction={direction}
       // Used onClick to stop click propagation event anywhere in the component to parent

openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/inline-edit.less

@@ -0,0 +1,18 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.inline-edit-container {
+  width: 100%;
+  .ant-space-item:first-child {
+    width: inherit;
+  }
+}