From 969c3bbdd5ea1f86b70c60d6af6eb408da047115 Mon Sep 17 00:00:00 2001
From: StroepWafel <contact@stroepwafel.au>
Date: Thu, 25 Jun 2026 19:01:00 +0930
Subject: [PATCH] fix(cloud PFP): button placement

---
 .../ProfilePictureSetting.svelte              | 97 ++++++++++---------
 1 file changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte b/src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte
index 9aec678e..2a35d6b1 100644
--- a/src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte
+++ b/src/plugins/built-in/profilePicture/ProfilePictureSetting.svelte
@@ -112,57 +112,66 @@
   }
 </script>
 
-<div class="flex flex-col gap-2 items-end">
-  {#if useCloudPfp}
-    <div class="flex gap-2 items-center">
-      <CloudPfpAvatar user={cloudAuth.state.user} class="object-cover rounded-full size-10" />
+<div class="flex flex-col items-end gap-1 shrink-0">
+  <div class="flex items-center gap-2">
+    {#if useCloudPfp}
+      <CloudPfpAvatar
+        user={cloudAuth.state.user}
+        class="object-cover rounded-full size-10 shrink-0"
+      />
       <button
         type="button"
-        class="px-2 py-1 text-xs rounded-md bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 disabled:opacity-50"
+        class="flex justify-center items-center shrink-0 rounded-md size-8 bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 disabled:opacity-50"
         disabled={refreshingCloud}
+        title="Refresh from cloud"
+        aria-label="Refresh from cloud"
         onclick={() => refreshCloudPfp()}
       >
-        {refreshingCloud ? 'Refreshing…' : 'Refresh from cloud'}
+        <span class="text-lg font-IconFamily dark:text-white">{'\uec79'}</span>
       </button>
-    </div>
-    {#if cloudRefreshError}
-      <p class="text-xs text-red-500">{cloudRefreshError}</p>
+      <div class="w-px h-8 shrink-0 bg-zinc-300 dark:bg-zinc-600" aria-hidden="true"></div>
     {/if}
-  {/if}
 
-  <div
-    class="flex relative justify-center items-center rounded-lg cursor-pointer select-none border-zinc-300 dark:border-zinc-600 bg-white/20 dark:bg-zinc-800/30"
-    onclick={() => value ? null : triggerSelect()}
-    ondragover={(e) => { e.stopPropagation(); dragging = true }}
-    ondragleave={() => dragging = false}
-    ondrop={onDrop}
-    onkeydown={(e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        triggerSelect()
-      }
-    }}
-    role="button"
-    tabindex="0"
-  >
-    {#if value}
-      <img src={value} alt="Profile" class="object-cover rounded-full size-10" />
-      <button
-        class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
-        onclick={(e) => {
-          e.stopPropagation()
-          removeImage()
-        }}
-      >&#215;</button>
-    {:else}
-      <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300">
-        <span class="text-lg font-IconFamily">{'\ued47'}</span>
-        <span>Upload</span>
-      </div>
-    {/if}
-    <input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
-    {#if dragging}
-      <div class="absolute inset-0 rounded-full bg-zinc-200/40 dark:bg-zinc-700/40"></div>
-    {/if}
+    <div
+      class="relative shrink-0 cursor-pointer select-none"
+      onclick={() => (value ? null : triggerSelect())}
+      ondragover={(e) => { e.stopPropagation(); dragging = true }}
+      ondragleave={() => dragging = false}
+      ondrop={onDrop}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          triggerSelect()
+        }
+      }}
+      role="button"
+      tabindex="0"
+    >
+      {#if value}
+        <div class="flex items-center rounded-lg bg-zinc-200 dark:bg-zinc-800">
+          <img src={value} alt="Local profile" class="object-cover rounded-full size-10" />
+          <button
+            class="flex justify-center items-center m-1 text-lg dark:text-white size-7"
+            aria-label="Remove local profile picture"
+            onclick={(e) => {
+              e.stopPropagation()
+              removeImage()
+            }}
+          >&#215;</button>
+        </div>
+      {:else}
+        <div class="flex gap-2 items-center px-3 py-1 text-xs rounded-lg border border-dashed transition border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 text-nowrap">
+          <span class="text-lg font-IconFamily">{'\ued47'}</span>
+          <span>Upload</span>
+        </div>
+      {/if}
+      <input type="file" accept="image/*" class="hidden" bind:this={fileInput} onchange={onFileChange} />
+      {#if dragging}
+        <div class="absolute inset-0 rounded-lg bg-zinc-200/40 dark:bg-zinc-700/40"></div>
+      {/if}
+    </div>
   </div>
+  {#if cloudRefreshError}
+    <p class="max-w-[12rem] text-xs text-right text-red-500">{cloudRefreshError}</p>
+  {/if}
 </div>