From d696fe9542847c1f1155ebf82ea8404b0981ef54 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 18 Dec 2024 18:37:41 +0530
Subject: [PATCH 1/2] fix the spacing around the input in custom properties
 right panel

---
 .../CustomPropertyTable/PropertyInput.tsx      |  2 +-
 .../CustomPropertyTable/PropertyValue.tsx      |  9 +++++----
 .../CustomPropertyTable/property-value.less    |  1 +
 .../common/InlineEdit/InlineEdit.component.tsx |  4 +++-
 .../common/InlineEdit/inline-edit.less         | 18 ++++++++++++++++++
 5 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/inline-edit.less

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyInput.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyInput.tsx
index c8c0128ac6a2..1f43636a57b0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyInput.tsx
+++ b/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}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
index a2dd1a0f15e7..dc36d0392746 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
+++ b/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':
@@ -255,6 +255,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
             onCancel={onHideInput}
             onSave={noop}>
             <Form
+              className="d-block"
               id={formId}
               initialValues={initialValues}
               layout="vertical"
@@ -314,11 +315,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 +360,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 +906,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} />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less
index fc786b0bdae7..cd625c814427 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less
+++ b/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;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/InlineEdit.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/InlineEdit.component.tsx
index e7e97214b088..97e203b9fd16 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/InlineEdit.component.tsx
+++ b/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
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/inline-edit.less b/openmetadata-ui/src/main/resources/ui/src/components/common/InlineEdit/inline-edit.less
new file mode 100644
index 000000000000..37127b0bdce5
--- /dev/null
+++ b/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;
+  }
+}

From dc310bc57431d32c1a8e449669ab690b4237be24 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Wed, 18 Dec 2024 18:54:20 +0530
Subject: [PATCH 2/2] remove unwanted css

---
 .../src/components/common/CustomPropertyTable/PropertyValue.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
index dc36d0392746..3206fdb845b9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
@@ -255,7 +255,6 @@ export const PropertyValue: FC<PropertyValueProps> = ({
             onCancel={onHideInput}
             onSave={noop}>
             <Form
-              className="d-block"
               id={formId}
               initialValues={initialValues}
               layout="vertical"