From 448d5ad2283bc82d9ac90fdde45a76879f3758ff Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 5 Jul 2024 11:41:38 +0200
Subject: [PATCH] fix(frontend): improve component list (#4028)

---
 .../componentsPanel/ComponentList.svelte      | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 7d405738f9..fe7dacf6c3 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -199,7 +199,7 @@
 						<ListItem title={`${title}`} subtitle={`(${components.length})`}>
 							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
-									<div class="w-20 relative">
+									<div class="w-[64px] relative">
 										{#if DEPRECATED_COMPONENTS[item]}
 											<div
 												class="absolute -top-2 -right-2 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100 rounded-md py-0.5 px-1 flex flex-row gap-1 items-center"
@@ -227,7 +227,7 @@
 												})
 											}}
 											title={componentsRecord[item].name}
-											class="cursor-move transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+											class="cursor-move transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 											justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 										>
 											<svelte:component this={componentsRecord[item].icon} class="text-primary" />
@@ -239,11 +239,11 @@
 								{/each}
 								{#if presets}
 									{#each presets as presetItem (presetItem)}
-										<div class="w-20">
+										<div class="w-[64px]">
 											<button
 												on:click={() => addPresetComponent(presetItem)}
 												title={presetsRecord[presetItem].name}
-												class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+												class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 											>
 												<svelte:component
@@ -266,13 +266,13 @@
 				<div class="flex flex-wrap gap-3 py-2">
 					{#if groups}
 						{#each groups as group (group.path)}
-							<div class="w-20">
+							<div class="w-[64px]">
 								<button
 									on:click={() => {
 										addGroup(group)
 									}}
 									title={group.name}
-									class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+									class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 								>
 									<LayoutDashboard class="text-secondary" />
@@ -283,13 +283,13 @@
 							</div>
 						{/each}
 					{/if}
-					<div class="w-20">
+					<div class="w-[64px]">
 						<button
 							on:click={() => {
 								addNewGroup()
 							}}
 							title=""
-							class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+							class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 								justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 						>
 							<Plus class="text-secondary" />
@@ -302,13 +302,13 @@
 				<div class="flex flex-wrap gap-3 py-2">
 					{#if customComponents}
 						{#each customComponents as cc (cc.path)}
-							<div class="w-20">
+							<div class="w-[64px]">
 								<button
 									on:click={() => {
 										addCustomComponent(cc)
 									}}
 									title={cc.name}
-									class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+									class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 								>
 									<LayoutDashboard class="text-secondary" />
@@ -319,7 +319,7 @@
 							</div>
 						{/each}
 					{/if}
-					<div class="w-20">
+					<div class="w-[64px]">
 						<button
 							on:click={() => {
 								if (!$enterpriseLicense) {
@@ -329,7 +329,7 @@
 								}
 							}}
 							title=""
-							class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+							class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 								justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 						>
 							<Plus class="text-secondary" />