From 336a759d458b5bd0e51f1fa3b3c316c42a854a9b Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Thu, 16 Jul 2026 09:00:58 +0200
Subject: [PATCH] ^_^

---
 public/s/css/f0ckm.css  |  7 +++++++
 public/s/js/settings.js | 19 +++++++++++++++++--
 views/settings.html     |  2 --
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 9599dd0..e94a317 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -8928,6 +8928,13 @@ span.badge.badge-current {
   margin-bottom: 20px;
 }
 
+@media (max-width: 768px) {
+  .avatar-settings-wrapper {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
+}
+
 .avatar-preview-container {
   display: flex;
   flex-direction: column;
diff --git a/public/s/js/settings.js b/public/s/js/settings.js
index 8a16067..26d1960 100644
--- a/public/s/js/settings.js
+++ b/public/s/js/settings.js
@@ -849,13 +849,28 @@
                 if (data.success) {
                     showBannerStatus('Banner removed', 'success');
                     e.target.remove();
+                    const editBtn = document.getElementById('banner-edit-btn');
+                    if (editBtn) editBtn.remove();
+
                     const bannerPreview = document.getElementById('banner-preview');
                     if (bannerPreview) {
                         const ph = document.createElement('div');
                         ph.id = 'banner-preview'; ph.className = 'banner-preview-img banner-placeholder';
-                        ph.style.cssText = 'width:100%;max-width:360px;height:80px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;';
+                        ph.style.cssText = 'width:100%;aspect-ratio:4/1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;';
                         ph.textContent = 'No banner set';
-                        bannerPreview.replaceWith(ph);
+                        
+                        // Replace the <a> wrapper if it exists, otherwise just the preview element
+                        const parentA = bannerPreview.closest('a');
+                        if (parentA && parentA.parentElement.classList.contains('avatar-preview-container')) {
+                            parentA.replaceWith(ph);
+                        } else {
+                            bannerPreview.replaceWith(ph);
+                        }
+                    }
+
+                    const livePreviewBox = document.getElementById('live-profile-preview-box');
+                    if (livePreviewBox) {
+                        livePreviewBox.style.setProperty('--author-banner', 'none');
                     }
                 } else {
                     showBannerStatus(data.msg || 'Failed to remove', 'error');
diff --git a/views/settings.html b/views/settings.html
index 723cacc..f4877cd 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -152,8 +152,6 @@
           </div>
 
           <div class="avatar-upload-section">
-            <p class="avatar-hint">Upload a custom banner image for your profile card (max 5 MB — gif, jpg, png, webp). Will be cropped to a landscape ratio.</p>
-
             <div class="avatar-upload-wrapper">
               <input type="file" id="banner-file-input" accept="image/gif,image/jpeg,image/png,image/webp" hidden>
               <button type="button" id="banner-choose-btn" class="button">Choose File</button>