From b2d14f8d7d0ba1d76e5cdfbf9ad465a438a999c6 Mon Sep 17 00:00:00 2001
From: Carter <35710697+cmintey@users.noreply.github.com>
Date: Tue, 28 Nov 2023 18:47:59 -0600
Subject: [PATCH] UI fixes (#82)

* Fix item card sizing

* fix account logo spacing
---
 .../navigation/NavMenu/NavMenu.svelte         | 84 ++++++++++---------
 .../wishlists/ItemCard/ItemCard.svelte        |  3 +-
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/navigation/NavMenu/NavMenu.svelte b/src/lib/components/navigation/NavMenu/NavMenu.svelte
index ad3f3f83..2917e499 100644
--- a/src/lib/components/navigation/NavMenu/NavMenu.svelte
+++ b/src/lib/components/navigation/NavMenu/NavMenu.svelte
@@ -15,52 +15,54 @@
 </script>
 
 {#if user}
-    <button use:popup={menuSettings}>
-        <Avatar {user} width="h-10 md:h-12" />
-    </button>
-    <div>
-        <nav class="card list-nav p-4 shadow-xl" data-popup="user">
-            <ul>
-                <li>
-                    <a href="/account">
-                        <iconify-icon icon="ion:person" />
-                        <span class="flex-auto">Account</span>
-                    </a>
-                </li>
-                {#if user.roleId == Role.ADMIN}
+    <div class="flex md:pr-4">
+        <button use:popup={menuSettings}>
+            <Avatar {user} width="h-10 md:h-12" />
+        </button>
+        <div>
+            <nav class="card list-nav p-4 shadow-xl" data-popup="user">
+                <ul>
                     <li>
-                        <a href="/admin">
-                            <iconify-icon icon="ion:settings" />
-                            <span class="flex-auto">Admin</span>
+                        <a href="/account">
+                            <iconify-icon icon="ion:person" />
+                            <span class="flex-auto">Account</span>
                         </a>
                     </li>
-                {/if}
+                    {#if user.roleId == Role.ADMIN}
+                        <li>
+                            <a href="/admin">
+                                <iconify-icon icon="ion:settings" />
+                                <span class="flex-auto">Admin</span>
+                            </a>
+                        </li>
+                    {/if}
 
-                <hr />
-                <GroupSubMenu {user} />
-                <hr />
+                    <hr />
+                    <GroupSubMenu {user} />
+                    <hr />
 
-                <li>
-                    <button
-                        class="list-option w-full"
-                        on:click={async () => {
-                            await fetch("/logout", { method: "POST" });
-                            invalidateAll();
-                        }}
-                    >
-                        <iconify-icon icon="ion:log-out" />
-                        <p>Sign Out</p>
-                    </button>
-                </li>
-                <hr class="pb-1" />
-                <li>
-                    <div class="flex w-full justify-around">
-                        <p>Mode</p>
-                        <LightSwitch />
-                    </div>
-                </li>
-            </ul>
-        </nav>
+                    <li>
+                        <button
+                            class="list-option w-full"
+                            on:click={async () => {
+                                await fetch("/logout", { method: "POST" });
+                                invalidateAll();
+                            }}
+                        >
+                            <iconify-icon icon="ion:log-out" />
+                            <p>Sign Out</p>
+                        </button>
+                    </li>
+                    <hr class="pb-1" />
+                    <li>
+                        <div class="flex w-full justify-around">
+                            <p>Mode</p>
+                            <LightSwitch />
+                        </div>
+                    </li>
+                </ul>
+            </nav>
+        </div>
     </div>
 {:else}
     <LightSwitch />
diff --git a/src/lib/components/wishlists/ItemCard/ItemCard.svelte b/src/lib/components/wishlists/ItemCard/ItemCard.svelte
index 7875a82b..0a40d8d1 100644
--- a/src/lib/components/wishlists/ItemCard/ItemCard.svelte
+++ b/src/lib/components/wishlists/ItemCard/ItemCard.svelte
@@ -107,6 +107,7 @@
         id: "item",
         position: "bottom",
         height: "max-h-fit",
+        padding: "md:px-12 lg:px-32 xl:px-56",
         meta: {
             item,
             showFor
@@ -142,7 +143,7 @@
 </script>
 
 <button
-    class="card card-hover block text-start"
+    class="card card-hover block w-full text-start"
     class:variant-ghost-warning={!item.approved}
     type="button"
     on:click={() => drawerStore.open(drawerSettings)}