refac

src/lib/components/chat/Chat.svelte

@@ -1712,7 +1712,7 @@
 			<div
 				class="absolute top-[4.25rem] w-full {$showSidebar
 					? 'md:max-w-[calc(100%-260px)]'
-					: ''} {$showControls ? 'lg:pr-[24rem]' : ''} z-20"
+					: ''} {$showControls ? 'lg:pr-[26rem]' : ''} z-20"
 			>
 				<div class=" flex flex-col gap-1 w-full">
 					{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
@@ -1740,7 +1740,7 @@
 		<div class="flex flex-col flex-auto z-10">
 			<div
 				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden {$showControls
-					? 'lg:pr-[24rem]'
+					? 'lg:pr-[26rem]'
 					: ''}"
 				id="messages-container"
 				bind:this={messagesContainerElement}
@@ -1769,7 +1769,7 @@
 				</div>
 			</div>
 
-			<div class={$showControls ? 'lg:pr-[24rem]' : ''}>
+			<div class={$showControls ? 'lg:pr-[26rem]' : ''}>
 				<MessageInput
 					bind:files
 					bind:prompt

src/lib/components/chat/ChatControls.svelte

@@ -101,9 +101,9 @@
 		{/if}
 	{:else if $showControls}
 		<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
-			<div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
+			<div class="pr-4 pt-14 pb-8 w-[26rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
 				<div
-					class="w-full h-full {$showOverview
+					class="w-full h-full {$showOverview && !$showCallOverlay
 						? ' '
 						: 'px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850  border border-gray-50 dark:border-gray-800'}  rounded-lg z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
 				>