Improve Blossom UI responsiveness and layout (v0.37.2)

- Show full npub on screens > 720px, truncated on smaller screens
- Make admin users list extend to full width

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/web/src/BlossomView.svelte

@@ -159,10 +159,10 @@
     function getMimeIcon(mimeType) {
         const category = getMimeCategory(mimeType);
         switch (category) {
-            case "image": return "";
-            case "video": return "";
-            case "audio": return "";
-            default: return "";
+            case "image": return "🖼️";
+            case "video": return "🎬";
+            case "audio": return "🎵";
+            default: return "📄";
         }
     }
 
@@ -464,6 +464,7 @@
 
         {#if !isAdminView && !selectedAdminUser}
             <div class="upload-section">
+                <span class="upload-label">Upload new files</span>
                 <input
                     type="file"
                     multiple
@@ -471,9 +472,6 @@
                     on:change={handleFileSelect}
                     class="file-input-hidden"
                 />
-                <button class="select-btn" on:click={triggerFileInput} disabled={isUploading}>
-                    Select Files
-                </button>
                 {#if selectedFiles.length > 0}
                     <span class="selected-count">{selectedFiles.length} file(s) selected</span>
                     <button
@@ -484,6 +482,9 @@
                         {isUploading ? uploadProgress : "Upload"}
                     </button>
                 {/if}
+                <button class="select-btn" on:click={triggerFileInput} disabled={isUploading}>
+                    Select Files
+                </button>
             </div>
         {/if}
 
@@ -523,7 +524,8 @@
                                     {userStat.profile?.name || truncateNpub(hexToNpub(userStat.pubkey))}
                                 </div>
                                 <div class="user-npub" title={userStat.pubkey}>
-                                    {truncateNpub(hexToNpub(userStat.pubkey))}
+                                    <span class="npub-full">{hexToNpub(userStat.pubkey)}</span>
+                                    <span class="npub-truncated">{truncateNpub(hexToNpub(userStat.pubkey))}</span>
                                 </div>
                             </div>
                             <div class="user-stats">
@@ -552,12 +554,19 @@
                             role="button"
                             tabindex="0"
                         >
-                            <div class="blob-icon">
-                                {getMimeIcon(blob.type)}
+                            <div class="blob-thumbnail">
+                                {#if getMimeCategory(blob.type) === "image"}
+                                    <img src={getBlobUrl(blob)} alt="" class="thumbnail-img" />
+                                {:else if getMimeCategory(blob.type) === "video"}
+                                    <video src={getBlobUrl(blob)} class="thumbnail-video" muted preload="metadata"></video>
+                                {:else}
+                                    <span class="thumbnail-icon">{getMimeIcon(blob.type)}</span>
+                                {/if}
                             </div>
                             <div class="blob-info">
                                 <div class="blob-hash" title={blob.sha256}>
-                                    {truncateHash(blob.sha256)}
+                                    <span class="hash-full">{blob.sha256}</span>
+                                    <span class="hash-truncated">{truncateHash(blob.sha256)}</span>
                                 </div>
                                 <div class="blob-meta">
                                     <span class="blob-size">{formatSize(blob.size)}</span>
@@ -678,7 +687,7 @@
 <style>
     .blossom-view {
         padding: 1em;
-        max-width: 900px;
+        box-sizing: border-box;
     }
 
     .header-section {
@@ -777,6 +786,12 @@
         flex-wrap: wrap;
     }
 
+    .upload-label {
+        color: var(--text-color);
+        font-size: 0.95em;
+        flex: 1;
+    }
+
     .file-input-hidden {
         display: none;
     }
@@ -844,6 +859,7 @@
         display: flex;
         flex-direction: column;
         gap: 0.5em;
+        width: 100%;
     }
 
     .blob-item {
@@ -861,10 +877,27 @@
         background-color: var(--sidebar-bg);
     }
 
-    .blob-icon {
+    .blob-thumbnail {
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--bg-color);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    .thumbnail-img,
+    .thumbnail-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .thumbnail-icon {
         font-size: 1.5em;
-        width: 2em;
-        text-align: center;
     }
 
     .blob-info {
@@ -878,6 +911,14 @@
         color: var(--text-color);
     }
 
+    .hash-full {
+        display: inline;
+    }
+
+    .hash-truncated {
+        display: none;
+    }
+
     .blob-meta {
         display: flex;
         gap: 1em;
@@ -918,6 +959,7 @@
         display: flex;
         flex-direction: column;
         gap: 0.5em;
+        width: 100%;
     }
 
     .user-stat-item {
@@ -968,8 +1010,14 @@
         font-size: 0.8em;
         color: var(--text-color);
         opacity: 0.6;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    }
+
+    .npub-full {
+        display: inline;
+    }
+
+    .npub-truncated {
+        display: none;
     }
 
     .user-stats {
@@ -1263,6 +1311,24 @@
         color: var(--text-color);
     }
 
+    @media (max-width: 720px) {
+        .hash-full {
+            display: none;
+        }
+
+        .hash-truncated {
+            display: inline;
+        }
+
+        .npub-full {
+            display: none;
+        }
+
+        .npub-truncated {
+            display: inline;
+        }
+    }
+
     @media (max-width: 600px) {
         .blob-item {
             flex-wrap: wrap;
@@ -1271,7 +1337,7 @@
         .blob-date {
             width: 100%;
             margin-top: 0.5em;
-            padding-left: 3em;
+            padding-left: 3.5em;
         }
 
         .modal-footer {

pkg/version/version

@@ -1 +1 @@
-v0.36.23
+v0.37.2