fix: provider card UI on dashboard

packages/renderer/src/lib/dashboard/ProviderCard.svelte

@@ -11,8 +11,8 @@ export let provider: ProviderInfo;
   class="flex bg-charcoal-800 rounded-md p-5 gap-3 flex-col flex-nowrap"
   role="region"
   aria-label="{provider.name} Provider">
-  <div class="lg:flex lg:flex-row gap-x-4">
-    <div class="grid grid-cols-[3rem_1fr] w-min gap-2">
+  <div class="flex flex-col lg:flex-row gap-x-4">
+    <div class="grid grid-cols-[3rem_1fr] w-1/4 gap-2">
       <IconImage image="{provider?.images?.icon}" class="mx-0 max-h-12" alt="{provider.name}"></IconImage>
       <div class="flex flex-col gap-0 text-gray-400 text-lg whitespace-nowrap" aria-label="context-name">
         <div class="flex flex-row gap-1 items-center">
@@ -26,11 +26,15 @@ export let provider: ProviderInfo;
         <div class="flex flex-row" aria-label="Actual State">
           <ProviderStatus status="{provider.status}" />
         </div>
+        <div class="my-3 empty:my-0 w-full">
+          <slot name="update" />
+        </div>
       </div>
     </div>
-    <div class="flex items-center flex-row space-x-10 grow flex-nowrap">
+    <div class="flex items-center flex-row space-x-10 mt-5 w-full lg:mt-0 lg:w-3/4 flex-nowrap">
       <slot name="content" />
     </div>
   </div>
+
   <ProviderLinks provider="{provider}" />
 </div>

packages/renderer/src/lib/dashboard/ProviderConfigured.svelte

@@ -48,26 +48,25 @@ onMount(() => {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-sm text-gray-700 flex-grow">
-      To start working with containers, {provider.name}
-      {#if provider.version}
-        v{provider.version}
-      {/if} needs to be started.
-    </p>
-
     {#if !runAtStart && !runInProgress}
-      <div class="mt-5">
+      <p class="text-sm text-gray-700 text-center w-2/3">
+        To start working with containers, {provider.name}
+        {#if provider.version}
+          v{provider.version}
+        {/if} needs to be started.
+      </p>
+      <div class="w-1/3 flex justify-center">
         <Button on:click="{() => runProvider()}">
           Run {provider.name}
         </Button>
       </div>
     {/if}
     {#if runAtStart || runInProgress}
-      <div class="mt-5">
+      <div class="flex flex-col w-full lg:w-2/3 justify-center items-center">
         {#if initializationContext.mode === InitializeAndStartMode}
           <Steps steps="{InitializationSteps}" current="{1}" />
         {/if}
-        <div class="flex flex-col text-gray-700 items-center justify-center" aria-label="Transitioning State">
+        <div class="flex flex-col text-gray-700 items-center" aria-label="Transitioning State">
           <div>Starting</div>
           <div class="my-2">
             <Spinner />
@@ -80,11 +79,11 @@ onMount(() => {
       <ErrorMessage class="flex flex-col mt-2 my-2 text-sm" error="{runError}" />
     {/if}
 
+    <PreflightChecks preflightChecks="{preflightChecks}" />
+  </svelte:fragment>
+  <svelte:fragment slot="update">
     {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
-      <div class="mt-5 mb-1 w-full flex justify-around">
-        <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
-      </div>
+      <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
     {/if}
-    <PreflightChecks preflightChecks="{preflightChecks}" />
   </svelte:fragment>
 </ProviderCard>

packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte

@@ -87,11 +87,11 @@ onDestroy(() => {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <div>
+    <div class="flex flex-col w-full lg:w-2/3 justify-center items-center">
       {#if initializationContext.mode === InitializeAndStartMode}
         <Steps steps="{InitializationSteps}" />
       {/if}
-      <div class="flex flex-col text-gray-700 items-center justify-center" aria-label="Transitioning State">
+      <div class="flex flex-col text-gray-700 items-center" aria-label="Transitioning State">
         <div>Initializing</div>
         <div class="my-2">
           <Spinner />
@@ -107,11 +107,11 @@ onDestroy(() => {
       bind:this="{logsXtermDiv}">
     </div>
 
-    {#if provider.updateInfo}
-      <div class="mt-5 mb-1 w-full flex justify-around">
-        <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
-      </div>
-    {/if}
     <PreflightChecks preflightChecks="{preflightChecks}" />
   </svelte:fragment>
+  <svelte:fragment slot="update">
+    {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
+      <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
+    {/if}
+  </svelte:fragment>
 </ProviderCard>

packages/renderer/src/lib/dashboard/ProviderInstalled.svelte

@@ -135,58 +135,60 @@ function onInstallationClick() {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
+    <p class="text-sm text-gray-700 w-2/3 text-center" aria-label="Suggested Actions">
       To start working with containers, {provider.name} needs to be initialized.
     </p>
 
-    <div class="mt-5 relative" class:hidden="{!initializationButtonVisible}">
-      <div class="bg-gray-300 text-white flex">
-        <button
-          class="float-left bg-purple-600 hover:bg-purple-500 pt-2 pr-3 pl-3 pb-2 text-[13px] text-white mr-px w-[180px]"
-          on:click="{onInstallationClick}">
-          {installationOptionSelected}
-        </button>
-        <button
-          class="inline-block bg-purple-600 hover:bg-purple-500 text-[13px] text-white pt-2 pr-3 pl-3 pb-2 w-[32px]"
-          on:click="{() => updateOptionsMenu(!installationOptionsMenuVisible)}">
-          <i class="fas fa-caret-down"></i>
-        </button>
-      </div>
-      <div
-        class="z-10 min-w-[130px] m-auto bg-primary text-[13px] text-white absolute w-full"
-        class:hidden="{!installationOptionsMenuVisible}">
-        <ul class="w-full outline-none bg-charcoal-800 rounded-sm placeholder-gray-700">
-          <li>
-            <button
-              class="w-full p-2 {installationOptionSelected === InitializeOnlyMode
-                ? 'bg-purple-600 text-white'
-                : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
-              on:click="{() => {
-                installationOptionSelected = InitializeOnlyMode;
-                installationOptionsMenuVisible = false;
-              }}">
-              {InitializeOnlyMode}
-              {provider.name}
-            </button>
-          </li>
-          <li>
-            <button
-              class="w-full p-2 {installationOptionSelected === InitializeAndStartMode
-                ? 'bg-purple-600 text-white'
-                : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
-              on:click="{() => {
-                installationOptionSelected = InitializeAndStartMode;
-                installationOptionsMenuVisible = false;
-              }}">
-              {InitializeAndStartMode}
-              {provider.name}
-            </button>
-          </li>
-        </ul>
+    <div class="min-w-[230px] w-1/3 flex justify-center" class:hidden="{!initializationButtonVisible}">
+      <div class="w-[212px] relative">
+        <div class="bg-gray-300 text-white flex w-[212px]">
+          <button
+            class="float-left bg-purple-600 hover:bg-purple-500 pt-2 pr-3 pl-3 pb-2 text-[13px] text-white mr-px w-[180px]"
+            on:click="{onInstallationClick}">
+            {installationOptionSelected}
+          </button>
+          <button
+            class="inline-block bg-purple-600 hover:bg-purple-500 text-[13px] text-white pt-2 pr-3 pl-3 pb-2 w-[32px]"
+            on:click="{() => updateOptionsMenu(!installationOptionsMenuVisible)}">
+            <i class="fas fa-caret-down"></i>
+          </button>
+        </div>
+        <div
+          class="z-10 min-w-[130px] m-auto bg-primary text-[13px] text-white absolute w-full"
+          class:hidden="{!installationOptionsMenuVisible}">
+          <ul class="w-full outline-none bg-charcoal-800 rounded-sm placeholder-gray-700">
+            <li>
+              <button
+                class="w-full p-2 {installationOptionSelected === InitializeOnlyMode
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
+                on:click="{() => {
+                  installationOptionSelected = InitializeOnlyMode;
+                  installationOptionsMenuVisible = false;
+                }}">
+                {InitializeOnlyMode}
+                {provider.name}
+              </button>
+            </li>
+            <li>
+              <button
+                class="w-full p-2 {installationOptionSelected === InitializeAndStartMode
+                  ? 'bg-purple-600 text-white'
+                  : 'bg-purple-700 text-gray-700'} hover:bg-purple-500 cursor-pointer"
+                on:click="{() => {
+                  installationOptionSelected = InitializeAndStartMode;
+                  installationOptionsMenuVisible = false;
+                }}">
+                {InitializeAndStartMode}
+                {provider.name}
+              </button>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
 
-    <div class="mt-5" class:hidden="{!initializeInProgress}">
+    <div class="flex flex-col w-full lg:w-2/3 justify-center items-center" class:hidden="{!initializeInProgress}">
       {#if installationOptionSelected === InitializeAndStartMode}
         <Steps steps="{InitializationSteps}" />
       {/if}
@@ -206,11 +208,11 @@ function onInstallationClick() {
       bind:this="{logsXtermDiv}">
     </div>
 
+    <PreflightChecks preflightChecks="{preflightChecks}" />
+  </svelte:fragment>
+  <svelte:fragment slot="update">
     {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
-      <div class="mt-5 mb-1 w-full flex justify-around">
-        <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
-      </div>
+      <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
     {/if}
-    <PreflightChecks preflightChecks="{preflightChecks}" />
   </svelte:fragment>
 </ProviderCard>

packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte

@@ -17,10 +17,10 @@ let preflightChecks: CheckStatus[] = [];
   <svelte:fragment slot="content">
     <div class="flex flex-col grow">
       <div class="flex flex-row items-center flex-row space-x-10 grow flex-nowrap">
-        <p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
+        <p class="text-sm text-gray-700 grow text-center" aria-label="Suggested Actions">
           Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.
         </p>
-        <div class="mt-5 mb-1 flex space-x-2">
+        <div class="flex space-x-2 w-full lg:w-1/3 justify-center">
           <ProviderDetectionChecksButton
             onDetectionChecks="{checks => (detectionChecks = checks)}"
             provider="{provider}" />

packages/renderer/src/lib/dashboard/ProviderReady.svelte

@@ -13,20 +13,20 @@ let preflightChecks: CheckStatus[] = [];
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
     {#if provider.containerConnections.length > 0}
-      <div class="flex flex-row text-sm text-gray-900 mt-4">
+      <div class="flex flex-row text-sm text-gray-900 w-full lg:w-2/3 justify-center items-center">
         <p>
           {provider.containerConnections.map(c => c.name).join(', ')}
         </p>
       </div>
     {/if}
 
-    {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
-      <div class="mt-5 mb-1 w-full flex justify-around">
-        <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
-      </div>
-    {/if}
     <PreflightChecks preflightChecks="{preflightChecks}" />
 
     <ProviderWarnings provider="{provider}" />
   </svelte:fragment>
+  <svelte:fragment slot="update">
+    {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version}
+      <ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
+    {/if}
+  </svelte:fragment>
 </ProviderCard>

packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte

@@ -55,6 +55,7 @@ async function performUpdate(provider: ProviderInfo) {
     inProgress="{updateInProgress}"
     disabled="{preflightChecksFailed}"
     icon="{faBoxOpen}"
+    padding="px-3 py-0.5"
     on:click="{() => performUpdate(provider)}">
     Update to {provider.updateInfo.version}
   </Button>