fix(settings): keep the footer item's proportions while dragging

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

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>
         )}