chore(ProviderCard): make card responsive

Signed-off-by: axel7083 <[email protected]>
axel7083 · Apr 18, 2024 · f29524a · f29524a
1 parent 6efeded
commit f29524a
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/packages/renderer/src/lib/dashboard/ProviderCard.svelte b/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="flex flex-row gap-10">
-    <div class="flex gap-3 flex-row justify-start items-center">
+  <div class="lg:flex lg:flex-row gap-x-4">
+    <div class="grid grid-cols-[3rem_1fr] w-min 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">

diff --git a/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte b/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte
@@ -48,7 +48,7 @@ onMount(() => {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-sm text-gray-700">
+    <p class="text-sm text-gray-700 flex-grow">
       To start working with containers, {provider.name}
       {#if provider.version}
         v{provider.version}

diff --git a/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte b/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte
@@ -91,7 +91,7 @@ onDestroy(() => {
       {#if initializationContext.mode === InitializeAndStartMode}
         <Steps steps="{InitializationSteps}" />
       {/if}
-      <div class="flex flex-col text-gray-700" aria-label="Transitioning State">
+      <div class="flex flex-col text-gray-700 items-center justify-center" aria-label="Transitioning State">
         <div>Initializing</div>
         <div class="my-2">
           <Spinner />

diff --git a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
@@ -135,7 +135,7 @@ function onInstallationClick() {
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-sm text-gray-700" aria-label="Suggested Actions">
+    <p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
       To start working with containers, {provider.name} needs to be initialized.
     </p>
 

diff --git a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
@@ -15,7 +15,7 @@ let preflightChecks: CheckStatus[] = [];
 
 <ProviderCard provider="{provider}">
   <svelte:fragment slot="content">
-    <p class="text-sm text-gray-700" aria-label="Suggested Actions">
+    <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">