fix: improve featured extension breakpoints

The responsive breakpoints for featured extensions were set too small, so in the
Settings > Extensions page it would scale to where the icons were not visible.

Responsive breakpoints are set based on window width, so we have a bit of a
dilemma since this component is shown in both the Dashboard (with minimal left
navbar and infinite width) and Settings > Extensions (bigger left navbar and
width limit). I tried to balance these, so the columns get a little big in the
Dashboard and don't go past three columns, but don't cause noticeable scaling
issues in Settings.

Also moved padding from the bottom of this component to the Dashboard where it
was missing.

Fixes #3460.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

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

@@ -34,7 +34,7 @@ function getInitializationContext(id: string): InitializationContext {
 </script>
 
 <NavPage searchEnabled="{false}" title="Dashboard">
-  <div slot="content" class="flex flex-col min-w-full h-fit bg-charcoal-700 shadow-nav pt-5">
+  <div slot="content" class="flex flex-col min-w-full h-fit bg-charcoal-700 shadow-nav py-5">
     <div class="min-w-full flex-1">
       <div class="px-5 space-y-5 h-full">
         <!-- Provider is ready display a box to indicate some information -->

packages/renderer/src/lib/featured/FeaturedExtensions.svelte

@@ -7,10 +7,7 @@ import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
 
 <!--Title-->
 <p class="text-lg first-letter:uppercase font-bold">featured extensions:</p>
-<div
-  class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 pb-4"
-  role="region"
-  aria-label="FeaturedExtensions">
+<div class="grid min-[920px]:grid-cols-2 min-[1180px]:grid-cols-3 gap-3" role="region" aria-label="FeaturedExtensions">
   {#each $featuredExtensionInfos as featuredExtension}
     <div
       title="{featuredExtension.description}"