From 64368e3fa5379e44696ebc8b73567b5d69b960da Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Oct 2022 11:58:38 +0200
Subject: [PATCH] fix(nc-gui): correct input style padding for form views

---
 packages/nc-gui/components/cell/Duration.vue              | 2 +-
 packages/nc-gui/components/cell/Percent.vue               | 2 +-
 packages/nc-gui/components/cell/Text.vue                  | 2 +-
 packages/nc-gui/components/smartsheet/Form.vue            | 6 +++++-
 .../pages/[projectType]/form/[viewId]/index/survey.vue    | 8 ++++++++
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 50f8665a0d..3e4fc767dd 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -76,7 +76,7 @@ const submitDuration = () => {
       ref="durationInput"
       v-model="localState"
       class="w-full !border-none p-0"
-      :class="{ '!p-2': editEnabled }"
+      :class="{ '!px-2': editEnabled }"
       :placeholder="durationPlaceholder"
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index d9fe77c127..501f10b44c 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -19,7 +19,7 @@ const vModel = useVModel(props, 'modelValue', emits)
     v-if="editEnabled"
     v-model="vModel"
     class="w-full !border-none text-base"
-    :class="{ '!p-2': editEnabled }"
+    :class="{ '!px-2': editEnabled }"
     type="number"
   />
   <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index d950e04d59..832ddb7ff4 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -23,7 +23,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none bg-transparent"
-    :class="{ '!p-2': editEnabled }"
+    :class="{ '!px-2': editEnabled }"
     @blur="editEnabled = false"
   />
 
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index ae58564208..683e4550d0 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -780,7 +780,11 @@ watch(view, (nextView) => {
 }
 
 .nc-input {
-  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex items-center border-solid border-1 border-primary;
+  @apply appearance-none w-full !bg-white rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50;
+
+  :deep(input) {
+    @apply !px-1;
+  }
 }
 
 .form-meta-input::placeholder {
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index aa11ec1ddf..59aee247ff 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -434,4 +434,12 @@ onMounted(() => {
     @apply mr-2;
   }
 }
+
+.nc-input {
+  @apply appearance-none w-full !bg-white rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50;
+
+  input {
+    @apply !py-1 !px-1;
+  }
+}
 </style>