From d3f061e73ddd0faabe155a24840c6658d3ecf120 Mon Sep 17 00:00:00 2001
From: Luca Stocchi <49404737+lstocchi@users.noreply.github.com>
Date: Tue, 30 Apr 2024 09:42:50 +0200
Subject: [PATCH] fix: fix dashboard UI (#7006)

Signed-off-by: lstocchi <lstocchi@redhat.com>
---
 .../lib/dashboard/ProviderInstalled.svelte    |  4 +-
 .../lib/dashboard/ProviderNotInstalled.svelte | 46 +++++++++++--------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
index ad2f546e6df..2505a04d696 100644
--- a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
+++ b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
@@ -139,7 +139,7 @@ function onInstallationClick() {
       To start working with containers, {provider.name} needs to be initialized.
     </p>
 
-    <div class="mt-5" class:hidden="{!initializationButtonVisible}">
+    <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]"
@@ -153,7 +153,7 @@ function onInstallationClick() {
         </button>
       </div>
       <div
-        class="-z-1 min-w-[130px] m-auto bg-primary text-[13px] text-white"
+        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>
diff --git a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
index 2459bfac0ee..109479b3216 100644
--- a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
+++ b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
@@ -15,25 +15,33 @@ let preflightChecks: CheckStatus[] = [];
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-sm text-gray-700 flex-grow" 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">
-      <ProviderDetectionChecksButton onDetectionChecks="{checks => (detectionChecks = checks)}" provider="{provider}" />
-      <ProviderInstallationButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
-    </div>
-    {#if detectionChecks.length > 0}
-      <div class="flex flex-col mt-5 px-5 pt-5 pb-0 rounded-lg bg-zinc-600">
-        {#each detectionChecks as detectionCheck}
-          <div class="flex flex-col">
-            <p class="mb-4 items-center list-inside">{detectionCheck.status ? '✅' : '❌'} {detectionCheck.name}</p>
-            {#if detectionCheck.details}
-              Details: <p class="text-gray-400 w-full break-all">{detectionCheck.details}</p>
-            {/if}
-          </div>
-        {/each}
+    <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">
+          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">
+          <ProviderDetectionChecksButton
+            onDetectionChecks="{checks => (detectionChecks = checks)}"
+            provider="{provider}" />
+          <ProviderInstallationButton
+            onPreflightChecks="{checks => (preflightChecks = checks)}"
+            provider="{provider}" />
+        </div>
       </div>
-    {/if}
-    <PreflightChecks preflightChecks="{preflightChecks}" />
+      {#if detectionChecks.length > 0}
+        <div class="flex flex-col mt-5 px-5 pt-5 pb-0 rounded-lg bg-zinc-600">
+          {#each detectionChecks as detectionCheck}
+            <div class="flex flex-col">
+              <p class="mb-4 items-center list-inside">{detectionCheck.status ? '✅' : '❌'} {detectionCheck.name}</p>
+              {#if detectionCheck.details}
+                Details: <p class="text-gray-400 w-full break-all">{detectionCheck.details}</p>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+      <PreflightChecks preflightChecks="{preflightChecks}" />
+    </div>
   </svelte:fragment>
 </ProviderCard>