styling polish (#526)

modules/desktop/src/components/package-banner/package-banner.svelte

@@ -84,7 +84,7 @@
       {/if}
       <p class="mt-4 text-sm">{pkg.desc}</p>
       <menu class="mt-4 flex h-10 gap-4 text-xs">
-        <div class="min-w-[180px]">
+        <div class="w-fit min-w-[160px]">
           <PackageVersionSelector
             buttonSize="large"
             {pkg}
@@ -93,7 +93,8 @@
           />
         </div>
         {#if (pkg?.installed_versions?.length || 0) > 0}
-          <ToolTip class="ml-[-80px]">
+          <div class="min-w-[120px]">
+            <ToolTip>
               <Button
                 slot="target"
                 class="h-10"
@@ -113,8 +114,10 @@
                 <div>Removes all the versions of the package</div>
               </div>
             </ToolTip>
+          </div>
         {/if}
         {#if (pkg?.installed_versions?.length || 0) > 1}
+          <div class="min-w-[120px]">
             <ToolTip>
               <Button
                 slot="target"
@@ -134,6 +137,7 @@
                 <div>Keeps latest (v{findRecentInstalledVersion(pkg)})</div>
               </div>
             </ToolTip>
+          </div>
         {/if}
         {#if pkg.github}
           <button
@@ -149,6 +153,7 @@
           </button>
         {/if}
         {#if pkg.installed_versions?.length}
+          <div class="min-w-[160px]">
             <Button
               class="h-10"
               type="plain"
@@ -163,6 +168,7 @@
                 OPEN IN TERMINAL
               {/if}
             </Button>
+          </div>
         {/if}
       </menu>
     </article>

modules/desktop/src/components/package-card/package-card.svelte

@@ -48,10 +48,13 @@
             <h3 class="text-bold font-mona line-clamp-1 mb-4 text-3xl font-bold text-white">
               {fixPackageName(pkg.name)}
             </h3>
-            <p class="line-clamp-10 h-[160px] text-xs font-thin lowercase">{pkg.desc ?? ""}</p>
+            <p class="line-clamp-[8] h-[160px] text-[14px] font-thin lowercase leading-[20px]">
+              {pkg.desc ?? ""}
+            </p>
           {/if}
         </article>
-        <div class="relative mt-3.5 w-full">
+        <div class="mt-3.5 w-full">
+          <div class="flex w-fit flex-col items-center">
             <div class="install-button {layout}" on:mousedown={preventPropagation}>
               {#if pkg.state === PackageStates.INSTALLED}
                 <PackageInstalledBadge version={pkg.version} />
@@ -66,8 +69,7 @@
                 />
               {/if}
             </div>
-        </div>
-        <div class="relative mt-1.5 h-[10px] leading-[10px]">
+            <div class="mt-1.5 h-[10px] leading-[10px]">
               {#if pkg.state === "NEEDS_UPDATE"}
                 <span class="text-[10px]">
                   <span class="opacity-70">you have</span>
@@ -77,6 +79,8 @@
             </div>
           </div>
         </div>
+      </div>
+    </div>
   </a>
 
   {#if progessLoading > 0 && progessLoading < 100}
@@ -195,22 +199,7 @@
   }
 
   .install-button {
-    width: 160px;
-  }
-
-  .install-button.bottom {
-    min-width: 100%;
-  }
-
-  @media screen and (min-width: 650px) {
-    .install-button.bottom {
-      min-width: 60%;
-    }
-  }
-
-  @media screen and (min-width: 1000px) {
-    .install-button.bottom {
-      min-width: 50%;
-    }
+    min-width: 160px;
+    width: fit-content;
   }
 </style>

modules/desktop/src/components/side-menu/menu-button.svelte

@@ -11,7 +11,7 @@
   class="outline-gray hover:bg-gray box-border flex w-full items-center gap-2 rounded-sm px-1 text-left align-middle text-xs outline-1 transition-all hover:bg-opacity-25 hover:outline"
   class:active
 >
-  <i class="icon-{icon} mt-1" />
+  <i class="icon-{icon} mt-1 mr-1" />
   <div class="text-sm font-thin">
     {label}
   </div>

modules/desktop/src/components/side-menu/side-menu.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <aside class="border-gray border border-t-0 border-b-0 border-l-0 p-2">
-  <ul class="flex flex-col gap-1 pt-4 pl-1">
+  <ul class="flex flex-col gap-1 px-1 pt-4">
     <MenuButton
       label={$t("tags.discover").toLowerCase()}
       icon="map"

modules/ui/src/tool-tip/tool-tip.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  let clazz = "";
-  export { clazz as class };
   // TODO: this tool tip assumes it is below the target element, when multiple directions are needed, this will need to be updated
 </script>
 
 <div class="group relative">
   <slot name="target" />
   <div
-    class="tooltip invisible absolute top-full mt-4 w-full min-w-max border border-gray bg-black transition-all group-hover:visible {clazz}"
+    class="tooltip invisible absolute top-full left-1/2 mt-4 w-full min-w-max translate-x-[-50%] border border-gray bg-black transition-all group-hover:visible"
   >
     <div class="px-6 py-2">
       <slot name="tooltip-content" />