From 08a468fe578dafdb010e2581c7e1fc406dcc06d2 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 13 Oct 2022 17:22:58 +0300
Subject: [PATCH] feat: scroll for select options

Re #3854

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet/column/SelectOptions.vue       | 73 ++++++++++---------
 1 file changed, 37 insertions(+), 36 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index 87fb5017d2..2e3126382f 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -129,42 +129,43 @@ watch(inputs, () => {
 
 <template>
   <div class="w-full">
-    <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
-      <template #item="{ element, index }">
-        <div class="flex py-1 items-center nc-select-option">
-          <MdiDragVertical v-if="!isKanban" small class="nc-child-draggable-icon handle" />
-          <a-dropdown
-            v-model:visible="colorMenus[index]"
-            :trigger="['click']"
-            overlay-class-name="nc-dropdown-select-color-options"
-          >
-            <template #overlay>
-              <LazyGeneralColorPicker
-                v-model="element.color"
-                :pick-button="true"
-                @update:model-value="colorMenus[index] = false"
-              />
-            </template>
-            <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
-          </a-dropdown>
-
-          <a-input ref="inputs" v-model:value="element.title" class="caption" @change="optionChanged(element.id)" />
-
-          <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
-        </div>
-      </template>
-      <template #footer>
-        <div v-if="validateInfos?.['colOptions.options']?.help?.[0]?.[0]" class="text-error text-[10px] my-2">
-          {{ validateInfos['colOptions.options'].help[0][0] }}
-        </div>
-
-        <a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()">
-          <div class="flex items-center">
-            <MdiPlus />
-            <span class="flex-auto">Add option</span>
+    <div class="max-h-[250px] overflow-x-auto pr-1">
+      <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
+        <template #item="{ element, index }">
+          <div class="flex py-1 items-center nc-select-option">
+            <MdiDragVertical v-if="!isKanban" small class="nc-child-draggable-icon handle" />
+            <a-dropdown
+              v-model:visible="colorMenus[index]"
+              :trigger="['click']"
+              overlay-class-name="nc-dropdown-select-color-options"
+            >
+              <template #overlay>
+                <LazyGeneralColorPicker
+                  v-model="element.color"
+                  :pick-button="true"
+                  @update:model-value="colorMenus[index] = false"
+                />
+              </template>
+              <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
+            </a-dropdown>
+
+            <a-input ref="inputs" v-model:value="element.title" class="caption" @change="optionChanged(element.id)" />
+
+            <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
           </div>
-        </a-button>
-      </template>
-    </Draggable>
+        </template>
+        <template #footer>
+          <div v-if="validateInfos?.['colOptions.options']?.help?.[0]?.[0]" class="text-error text-[10px] my-2">
+            {{ validateInfos['colOptions.options'].help[0][0] }}
+          </div>
+        </template>
+      </Draggable>
+    </div>
+    <a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()">
+      <div class="flex items-center">
+        <MdiPlus />
+        <span class="flex-auto">Add option</span>
+      </div>
+    </a-button>
   </div>
 </template>