From 6c4e2ca032b268fd212657d7a0094c686ae5ac45 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 11 Jul 2023 14:20:20 +0200
Subject: [PATCH] fix(frontend): Fix select width in app table to avoid content
 jump (#1850)

* fix(frontend): Fix select width in app table to avoid content jump

* fix(frontend): Increase width
---
 .../components/display/table/AppTable.svelte  | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index 9d8a5a335f..a4b44e5f26 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -351,11 +351,13 @@
 															$hoverStore = undefined
 														}
 													}}
-													class={($selectedComponent?.includes(actionButton.id) ||
-														$hoverStore === actionButton.id) &&
-													$mode !== 'preview'
-														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
-														: ''}
+													class={classNames(
+														($selectedComponent?.includes(actionButton.id) ||
+															$hoverStore === actionButton.id) &&
+															$mode !== 'preview'
+															? 'outline outline-indigo-500 outline-1 outline-offset-1 relative'
+															: ''
+													)}
 												>
 													{#if $mode !== 'preview'}
 														<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -428,18 +430,20 @@
 																{controls}
 															/>
 														{:else if actionButton.type == 'selectcomponent'}
-															<AppSelect
-																extraKey={'idx' + rowIndex}
-																{render}
-																id={actionButton.id}
-																customCss={actionButton.customCss}
-																configuration={actionButton.configuration}
-																recomputeIds={actionButton.recomputeIds}
-																preclickAction={async () => {
-																	toggleRow(row, rowIndex)
-																}}
-																{controls}
-															/>
+															<div class="w-40">
+																<AppSelect
+																	extraKey={'idx' + rowIndex}
+																	{render}
+																	id={actionButton.id}
+																	customCss={actionButton.customCss}
+																	configuration={actionButton.configuration}
+																	recomputeIds={actionButton.recomputeIds}
+																	preclickAction={async () => {
+																		toggleRow(row, rowIndex)
+																	}}
+																	{controls}
+																/>
+															</div>
 														{/if}
 													{:else if actionButton.type == 'buttoncomponent'}
 														<AppButton
@@ -469,17 +473,20 @@
 															}}
 														/>
 													{:else if actionButton.type == 'selectcomponent'}
-														<AppSelect
-															extraKey={'idx' + rowIndex}
-															{render}
-															id={actionButton.id}
-															customCss={actionButton.customCss}
-															configuration={actionButton.configuration}
-															recomputeIds={actionButton.recomputeIds}
-															preclickAction={async () => {
-																toggleRow(row, rowIndex)
-															}}
-														/>
+														<div class="w-40">
+															<AppSelect
+																--font-size="10px"
+																extraKey={'idx' + rowIndex}
+																{render}
+																id={actionButton.id}
+																customCss={actionButton.customCss}
+																configuration={actionButton.configuration}
+																recomputeIds={actionButton.recomputeIds}
+																preclickAction={async () => {
+																	toggleRow(row, rowIndex)
+																}}
+															/>
+														</div>
 													{/if}
 												</div>
 											{/each}