From b0e85e40d2a278a09a9270fb7b3a5e7c099d4061 Mon Sep 17 00:00:00 2001
From: omartelo <meopedevts@proton.me>
Date: Thu, 8 Oct 2026 15:36:30 -0300
Subject: [PATCH] fix(settings): keep the footer item's proportions while
 dragging

---
 CHANGELOG.md                                          |  5 +++++
 .../src/components/settings/FooterLayoutEditor.tsx    | 11 +++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f656507b..4389efcf6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   list, then pick with the arrow keys and Enter. Long family names no longer
   run under the checkmark.
 
+### Fixed
+
+- **Dragging a footer item in Settings keeps its shape.** The chip under the pointer
+  stays on one line at its own size instead of wrapping into a taller, narrower block.
+
 ## [0.62.1] - 2026-10-08
 
 ### Fixed
diff --git a/frontend/src/components/settings/FooterLayoutEditor.tsx b/frontend/src/components/settings/FooterLayoutEditor.tsx
index 9b8b3d0a4..2c476a815 100644
--- a/frontend/src/components/settings/FooterLayoutEditor.tsx
+++ b/frontend/src/components/settings/FooterLayoutEditor.tsx
@@ -46,7 +46,7 @@ import {
   type FooterZone,
 } from "@/lib/footer-layout"
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button"
 
 const ICONS: Record<FooterItem, LucideIcon> = {
   attach: Paperclip,
@@ -191,7 +191,14 @@ export function FooterLayoutEditor({ layout, disabled, onChange }: FooterLayoutE
       </div>
       <DragOverlay>
         {dragging && (
-          <span className="flex items-center gap-1.5 rounded-md bg-popover px-2.5 py-1.5 text-xs shadow-md">
+          // dnd-kit sizes the overlay to the chip it lifted, so it wears the
+          // chip's own button metrics; any other padding or glyph wraps the reading.
+          <span
+            className={cn(
+              buttonVariants({ variant: "ghost", size: "xs" }),
+              "rounded-md bg-popover tabular-nums shadow-md ring-1 ring-inset ring-border",
+            )}
+          >
             <ItemReading id={dragging} />
           </span>
         )}