From 3d7f91a5ecf2407d82d2ae7cebd03c5e571a1939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Sat, 22 Apr 2023 09:56:16 +0200
Subject: [PATCH] fix(frontend): App color picker overflow issue (#1449)

---
 .../editor/componentsPanel/CssSettings.svelte |  4 +-
 .../inputEditor/ColorInput.svelte             | 50 ++++++++++++++-----
 .../secondaryMenu/SecondaryMenu.svelte        |  3 +-
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
index 28af168a97..1d387014c0 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
@@ -69,13 +69,13 @@
 
 <div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div>
 <Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
-	<Tab value="ui" size="xs" class="grow">
+	<Tab value="ui" size="xs" class="w-1/2">
 		<div class="m-1 center-center">
 			<MousePointer2 size={16} />
 			<span class="pl-1">UI</span>
 		</div>
 	</Tab>
-	<Tab value="json" size="xs" class="grow">
+	<Tab value="json" size="xs" class="w-1/2">
 		<div class="m-1 center-center">
 			<CurlyBraces size={16} />
 			<span class="pl-1">JSON</span>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
index 7ad1166b2a..9d6ae08d8c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
@@ -2,26 +2,43 @@
 	import { createEventDispatcher } from 'svelte'
 	import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker'
 	import { ClearableInput } from '../../../../common'
+	import { createPopperActions } from 'svelte-popperjs'
+	import { fade } from 'svelte/transition'
 
 	export let value: string = '#fff'
 	const dispatch = createEventDispatcher()
+	const [popperRef, popperContent] = createPopperActions()
 	let isOpen = false
+	let width: number
 
 	$: dispatch('change', value)
+
+	function open() {
+		isOpen = true
+	}
 </script>
 
-<div class="color-picker-input grow">
-	<ClearableInput readonly bind:value on:focus={() => (isOpen = true)} />
-	<ColorPicker
-		bind:isOpen
-		bind:hex={value}
-		label={value}
-		canChangeMode={false}
-		components={ChromeVariant}
-		toRight
-		--focus-color="#e0e7ff"
-	/>
+<div use:popperRef bind:clientWidth={width} class="grow">
+	<ClearableInput readonly bind:value on:focus={open} />
 </div>
+{#if isOpen}
+	<div
+		transition:fade={{ duration: 150 }}
+		use:popperContent={{ placement: 'bottom', strategy: 'fixed' }}
+		class="color-picker-input z-[1002]"
+		style="width: {width > 280 ? width : 280}px;"
+	>
+		<ColorPicker
+			bind:isOpen
+			bind:hex={value}
+			label={value}
+			canChangeMode={false}
+			components={ChromeVariant}
+			toRight
+			--focus-color="#e0e7ff"
+		/>
+	</div>
+{/if}
 
 <style global>
 	.color-picker-input span > label {
@@ -29,10 +46,11 @@
 	}
 
 	.color-picker-input span > div.wrapper {
-		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
+		box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.25) !important;
 		border-style: none !important;
 		border-radius: 0.375rem !important;
-		z-index: 30;
+		top: 6px !important;
+		z-index: 30 !important;
 	}
 
 	.color-picker-input .slider-wrapper {
@@ -49,4 +67,10 @@
 		top: -2px !important;
 		box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
 	}
+
+	.color-picker-input .input-container > input {
+		background-color: #ffffff;
+		border: 1px solid #d1d5db;
+		border-radius: 6px;
+	}
 </style>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
index 20d9ac71d0..5a5b61a294 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
@@ -16,9 +16,10 @@
 	}
 </script>
 
+<!-- z-index must be above the split pane handles' z-index (which is 1001 atm.) -->
 <div
 	bind:clientWidth={width}
-	class="absolute z-50 inset-0 overflow-hidden"
+	class="absolute z-[1002] inset-0 overflow-hidden"
 	class:pointer-events-none={!$secondaryMenu.isOpen}
 >
 	{#if $secondaryMenu.isOpen && $secondaryMenu.component}