From ec2cf5c68c59cd76c08a3f069c0dddedff87ef56 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: Thu, 16 Mar 2023 12:42:41 +0100
Subject: [PATCH] fix(frontend): App panel styling (#1284)

* fix(frontend): App panel styling

* remove

* revert

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
---
 .../src/lib/components/apps/editor/AppEditorHeader.svelte   | 4 ++--
 .../editor/inlineScriptsPanel/InlineScriptsPanelList.svelte | 2 +-
 .../apps/editor/settingsPanel/ComponentPanel.svelte         | 6 +-----
 .../apps/editor/settingsPanel/common/PanelSection.svelte    | 3 +--
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 6faad73a96..22a751de15 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -329,7 +329,7 @@
 	<DrawerContent noPadding title="Debug Runs" on:close={() => (jobsDrawerOpen = false)}>
 		<Splitpanes class="!overflow-visible">
 			<Pane size={25}>
-				<PanelSection title="Past Runs" smallPadding>
+				<PanelSection title="Past Runs">
 					<div class="flex flex-col gap-2 w-full">
 						{#if $jobs.length > 0}
 							<div class="flex gap-2 flex-col ">
@@ -476,7 +476,7 @@
 </Drawer>
 
 <div
-	class="border-b flex flex-row justify-between py-1 gap-4  gap-y-2 px-4 items-center overflow-y-visible"
+	class="border-b flex flex-row justify-between py-1 gap-4  gap-y-2 px-3 items-center overflow-y-visible"
 >
 	<div class="min-w-64 w-64">
 		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 3369064c54..3862f7cc1d 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -52,7 +52,7 @@
 	}
 </script>
 
-<PanelSection title="Runnables" smallPadding>
+<PanelSection title="Runnables">
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
 			<div class="text-sm font-semibold truncate mb-1"> Inline scripts </div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 21560ada54..f60a3c3de1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -83,10 +83,7 @@
 {#if component}
 	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection
-				smallPadding
-				title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}
-			>
+			<PanelSection title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}>
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(
@@ -135,7 +132,6 @@
 						{#if Object.keys(component.componentInput.fields ?? {}).length > 0}
 							<div class="border w-full">
 								<PanelSection
-									smallPadding
 									title={`Runnable Inputs (${
 										Object.keys(component.componentInput.fields ?? {}).length
 									})`}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
index 51f379d97b..2f4ada91c3 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
@@ -3,7 +3,6 @@
 	import Tooltip from '../../../../Tooltip.svelte'
 
 	export let title: string
-	export let smallPadding: boolean = false
 	export let noPadding: boolean = false
 	export let titlePadding: string = ''
 	export let tooltip = ''
@@ -13,7 +12,7 @@
 	class={classNames(
 		$$props.class,
 		'flex flex-col h-full gap-2 items-start',
-		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
+		noPadding ? '' : 'p-3'
 	)}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">