fix: Sample diagrams

src/lib/components/Card/Card.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Tab } from '$lib/types';
   import type { Snippet } from 'svelte';
+  import { quintOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
   import Tabs from './Tabs.svelte';
 
@@ -40,9 +41,7 @@
 <div
   class="card flex h-fit {isOpen
     ? 'flex-grow'
-    : isClosable
-      ? 'w-1/2'
-      : ''} flex-col overflow-hidden rounded-2xl border-2">
+    : ''} w-full flex-col overflow-hidden rounded-2xl border-2">
   <div
     role="toolbar"
     tabindex="0"
@@ -51,7 +50,7 @@
     onkeypress={toggleCardOpen}>
     <div class="flex justify-between">
       {#if icon || title}
-        <span role="menubar" tabindex="0" class="d flex w-fit items-center gap-2 font-semibold">
+        <span role="menubar" tabindex="0" class="flex w-fit items-center gap-2 font-semibold">
           {#if icon}
             <i class={icon}></i>
           {/if}
@@ -73,7 +72,9 @@
     </div>
   </div>
   {#if isOpen}
-    <div class="card-body text-base-content flex-grow overflow-auto p-0" transition:slide>
+    <div
+      class="text-base-content flex-grow overflow-hidden p-0"
+      transition:slide={{ easing: quintOut }}>
       {@render children?.()}
     </div>
   {/if}

src/lib/components/Preset.svelte

@@ -2,6 +2,7 @@
   import Card from '$lib/components/Card/Card.svelte';
   import { updateCode } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
+  import { Button } from './ui/button';
 
   const samples = {
     Flow: `flowchart TD
@@ -221,16 +222,15 @@ packet-beta
 </script>
 
 <Card title="Sample Diagrams" isOpen={false} icon="fas fa-shapes">
-  <div class="flex flex-wrap gap-2 p-2">
+  <div class="flex h-fit flex-wrap gap-2 p-2">
     {#each diagramOrder as sample}
-      <button
-        class="btn btn-primary btn-sm w-fit min-w-20 flex-grow normal-case"
+      <Button
+        variant="secondary"
+        size="sm"
+        class="w-fit min-w-20 normal-case"
         onclick={() => loadSampleDiagram(sample)}>
         {sample}
-        {#if newDiagrams.includes(sample)}
-          <span class="fa fa-heart ml-2"></span>
-        {/if}
-      </button>
+      </Button>
     {/each}
   </div>
 </Card>

src/routes/edit/+page.svelte

@@ -162,11 +162,9 @@
             <Editor />
           </Card>
 
-          <div class="flex w-full flex-wrap">
-            <Preset />
-            <!-- <History /> -->
-            <Actions />
-          </div>
+          <Preset />
+          <!-- <History /> -->
+          <Actions />
         </div>
       </Resizable.Pane>
       <Resizable.Handle class="opacity-0" />