address comments.

Author: ItzNotABug

src/lib/components/regionEndpoint.svelte

@@ -15,15 +15,16 @@
 
 <Copy value={getProjectEndpoint()} appendTo="parent" copyText="Copy endpoint">
     <div
-        class="flex u-gap-12 u-cross-center interactive-text-output is-buttons-on-top u-text-center"
+        class="flex u-gap-8 u-cross-center interactive-text-output is-buttons-on-top u-text-center"
         style:min-inline-size="0"
         style:display="inline-flex">
         <span
             style:white-space="nowrap"
             class="text u-line-height-1-5"
             style:overflow="hidden"
             style:word-break="break-all"
-            use:truncateText>
+            use:truncateText
+            style:font-family="Inter, arial, sans-serif">
             {$projectRegion?.name}
         </span>
 
@@ -35,11 +36,5 @@
                 width={16}
                 height={12} />
         {/if}
-
-        <div class="interactive-text-output-buttons">
-            <button class="interactive-text-output-button is-hidden" aria-label="copy text">
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
-        </div>
     </div>
 </Copy>

src/lib/layout/wizard.svelte

@@ -30,6 +30,10 @@
     export let finalAction = 'Create';
     export let finalMethod: () => Promise<void> = null;
 
+    // If the parent layout manages hiding the wizard via dispatched `exit` events,
+    // the wizard won't hide automatically when `manualExitControl` is true. Handle it manually.
+    export let manualExitControl = false;
+
     const dispatch = createEventDispatcher();
 
     let showExitModal = false;
@@ -41,8 +45,9 @@
             trackEvent('wizard_exit', {
                 from: 'escape'
             });
-            dispatch('exit');
-            wizard.hide();
+
+            dispatch('exit', { optional: steps.get($wizard.step).optional });
+            if (!manualExitControl) wizard.hide();
         }
     }
 
@@ -53,8 +58,8 @@
             trackEvent('wizard_exit', {
                 from: 'button'
             });
-            dispatch('exit');
-            wizard.hide();
+            dispatch('exit', { optional: steps.get($wizard.step).optional });
+            if (!manualExitControl) wizard.hide();
         }
     }
 

src/lib/layout/wizardStep.svelte

@@ -34,6 +34,10 @@
 <slot />
 
 <style>
+    header {
+        margin-block-end: 1.25rem;
+    }
+
     .hide-divider {
         padding-block-end: 0;
         border-block-end: none;

src/routes/(console)/project-[region]-[project]/overview/header.svelte

@@ -9,8 +9,11 @@
         <CoverTitle>
             {$project?.name}
         </CoverTitle>
-        <Id value={$project.$id}>{$project.$id}</Id>
 
-        <RegionEndpoint />
+        <div class="u-flex u-gap-8 u-cross-center">
+            <Id value={$project.$id}>{$project.$id}</Id>
+
+            <RegionEndpoint />
+        </div>
     </svelte:fragment>
 </Cover>

src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte

@@ -33,6 +33,7 @@
 <Wizard
     title="Add an Android platform"
     steps={stepsComponents}
+    manualExitControl
     on:finish={onPlatformSetupFinish}
     on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />

src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte

@@ -33,6 +33,7 @@
 <Wizard
     title="Add an Apple platform"
     steps={stepsComponents}
+    manualExitControl
     on:finish={onPlatformSetupFinish}
     on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />

src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte

@@ -33,6 +33,7 @@
 <Wizard
     title="Add a Flutter platform"
     steps={stepsComponents}
+    manualExitControl
     on:finish={onPlatformSetupFinish}
     on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />

src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte

@@ -33,6 +33,7 @@
 <Wizard
     title="Add a React Native platform"
     steps={stepsComponents}
+    manualExitControl
     on:finish={onPlatformSetupFinish}
     on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -33,6 +33,7 @@
 <Wizard
     title="Add a web platform"
     steps={stepsComponents}
+    manualExitControl
     on:finish={onPlatformSetupFinish}
     on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte

@@ -17,12 +17,16 @@
      * this sometimes caused outdated data to be visible for a brief moment.
      */
     export async function invalidateDependencies(): Promise<void> {
-        console.log('invalidateDependencies');
         await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
     }
 
     export async function onPlatformSetupFinish(event: CustomEvent): Promise<void> {
-        const isSkipped = event.detail?.skipped ?? false;
+        const type = event.type;
+        const skipped = event.detail.skipped ?? false;
+        const optional = event.detail.optional ?? false;
+
+        const isSkipped = type === 'finish' ? skipped : type === 'exit' ? optional : false;
+
         showSkippedModal.set(isSkipped);
 
         if (!isSkipped) {