From 158fe588b142b44f796ab2c59e9fc0f9b5722ee0 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 05:02:37 +0100
Subject: [PATCH] fix: show the label name above its controls on a phone

---
 components/settings/keyword-settings.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/settings/keyword-settings.tsx b/components/settings/keyword-settings.tsx
index 9a7421ea6..ffd0db089 100644
--- a/components/settings/keyword-settings.tsx
+++ b/components/settings/keyword-settings.tsx
@@ -121,13 +121,14 @@ function KeywordRow({
       onDrop={onDrop}
       onDragEnd={onDragEnd}
       className={cn(
-        "flex items-center gap-3 py-2.5 px-3 rounded-md border bg-background group transition-opacity",
+        "flex flex-wrap items-center gap-x-3 gap-y-2 py-2.5 px-3 rounded-md border bg-background group transition-opacity sm:flex-nowrap",
         isDragging ? "opacity-40" : "opacity-100",
         isDragOver ? "border-primary" : "border-border"
       )}
     >
-      <GripVertical className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-50 cursor-grab" />
-      <div className="flex min-w-0 flex-1">
+      <GripVertical className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-50 cursor-grab max-sm:hidden" />
+      {/* On a phone the name gets a line of its own, the controls wrap under it. */}
+      <div className="flex min-w-0 flex-1 max-sm:basis-full">
         <TagBadge tagId={keyword.id} variant="badge" className="text-xs" />
       </div>
       <span