layout tweaks

2 files changed, 20 insertions, 19 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 2ad1df53..c2341c70 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -53,29 +53,29 @@
       {#if user}
         <a href={`/${user.username}`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white p-2 rounded-full w-16 h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="home" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="home" style="mx-auto w-8" />
           </button>
         </a>
         <a href={`/${user.username}/receive`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white p-2 rounded-full w-16 h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/receive`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="numpad" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="numpad" style="mx-auto w-8" />
           </button>
         </a>
         <a href={`/${user.username}/payments`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white p-2 rounded-full w-16 h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/payments`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'} relative"
-            ><Icon icon="clock" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="clock" style="mx-auto w-8" />
             {#if $newPayment}
               <span class="absolute top-0 right-0">
                 <span class="flex h-3 w-3">
@@ -92,17 +92,17 @@
         </a>
         <a href={`/send`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white p-2 rounded-full w-16 h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/send`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="send" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="send" style="mx-auto w-8" />
           </button>
         </a>
         <div class="relative">
           <OutClick on:outclick={() => (showMenu = false)}>
             <button
-              class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+              class="bg-white p-2 rounded-full w-16 h-16 drop-shadow-xl border border-black/10 {$page
                 .url.pathname === `/${user.username}` ||
               $page.url.pathname === `/${user.username}/settings` ||
               $page.url.pathname === `/support`
@@ -111,7 +111,7 @@
                     showMenu ? 'opacity-80' : ''
                   }`}"
               on:click={() => (showMenu = !showMenu)}
-              ><Icon icon="menu" style="mx-auto w-6 md:w-8" />
+              ><Icon icon="menu" style="mx-auto w-8" />
             </button>
 
             <div
@@ -125,7 +125,7 @@
                     <a {href} data-sveltekit-prefetch="off">
                       <button
                         class="flex justify-center items-center font-semibold hover:opacity-80"
-                        ><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)}
+                        ><Icon {icon} style="mr-2 w-8" /> {$t(key)}
                       </button>
                     </a>
                   </li>
@@ -147,7 +147,7 @@
       {/if}
     </nav>
     <div
-      class="absolute md:w-[64px] md:mx-auto lg:left-[164px] left-[calc(50vw-64px)] -bottom-[64px] z-30"
+      class="absolute md:w-[64px] md:mx-auto lg:left-[154px] xl:left-[194px] left-[calc(50vw-64px)] -bottom-[64px] z-30"
     >
       <Avatar user={subject} />
     </div>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 7c815d2d..d750e86c 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -76,8 +76,10 @@
 </script>
 
 <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
-  <div class="hidden lg:block lg:w-[300px]" />
-  <div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto max-w-sm mb-5">
+  <div class="hidden lg:block lg:w-[280px] xl:w-[360px]" />
+  <div
+    class="w-full lg:w-[280px] xl:w-[360px] lg:absolute space-y-5 left-20 mx-auto mb-5"
+  >
     <div
       class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
     >
@@ -165,15 +167,14 @@
           </button>
         </a>
       {/if}
+
       <button
         type="button"
         on:click={toggleDetails}
-        class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow"
+        class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex justify-center w-full"
       >
-        <div class="mx-auto flex">
-          <Icon icon="edit" style="w-8 mr-2" />
-          <div class="mt-1">{$t("user.details")}</div>
-        </div>
+        <Icon icon="edit" style="w-8 mr-2" />
+        <div class="mt-1">{$t("user.details")}</div>
       </button>
 
       {#if user?.admin && user.username !== subject.username}