fix(frontend): App panel styling (#1284)

* fix(frontend): App panel styling

* remove

* revert

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>

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} />

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>

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
 									})`}

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">