snapshot

src/features/snippets/SnippetCard.tsx

@@ -155,15 +155,6 @@ export function SnippetCard({ snippet, treeColorByName, treeDisplayByName, onRep
               <div className="snippet-md overflow-auto" dangerouslySetInnerHTML={{ __html: viewHtml }} />
             </div>
           </div>
-          {snippet.deadline_at ? (
-            <div className="border-t border-border/70 pt-1.5">
-              <SnippetDeadlineBadge
-                deadlineAt={snippet.deadline_at}
-                busy={busy}
-                onMarkDone={() => void clearDeadlineRemote()}
-              />
-            </div>
-          ) : null}
         </CardContent>
         <CardFooter className="flex flex-row flex-wrap items-center gap-2 border-t border-border/80 px-3 py-1">
           <div className="flex min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1">
@@ -181,6 +172,13 @@ export function SnippetCard({ snippet, treeColorByName, treeDisplayByName, onRep
             )}
           </div>
           <div className="flex h-7 shrink-0 items-center gap-1.5">
+            {snippet.deadline_at ? (
+              <SnippetDeadlineBadge
+                deadlineAt={snippet.deadline_at}
+                busy={busy}
+                onMarkDone={() => void clearDeadlineRemote()}
+              />
+            ) : null}
             <span className="whitespace-nowrap text-[10px] leading-none tabular-nums text-muted-foreground/90">
               {formatWhen(snippet.updated_at)}
             </span>

src/features/snippets/components/SnippetDeadlineBadge.tsx

@@ -12,10 +12,10 @@ type Props = {
 export function SnippetDeadlineBadge({ deadlineAt, busy, onMarkDone }: Props) {
   const tone = deadlineTone(deadlineAt);
   return (
-    <div className="flex items-center gap-0.5">
+    <div className="contents">
       <span
         className={cn(
-          "inline-flex max-w-full items-center rounded-md border-2 px-2 py-px text-[10px] font-medium tabular-nums leading-tight",
+          "text-[10px] font-medium tabular-nums",
           deadlineBadgeClass(tone),
         )}
         title="Deadline"
@@ -27,11 +27,12 @@ export function SnippetDeadlineBadge({ deadlineAt, busy, onMarkDone }: Props) {
           type="button"
           variant="ghost"
           size="icon-sm"
-          className="size-7 shrink-0 text-muted-foreground hover:text-foreground"
+          className="size-7 text-muted-foreground hover:text-foreground"
           disabled={busy}
           title="Erledigt — Deadline entfernen"
           onClick={e => {
             e.stopPropagation();
+            
             onMarkDone();
           }}
         >

src/lib/snippetDeadline.ts

@@ -32,11 +32,11 @@ export function deadlineTone(deadlineAt: string | null | undefined): DeadlineTon
 export function deadlineBadgeClass(tone: DeadlineTone): string {
   switch (tone) {
     case "upcoming":
-      return "border-blue-500/70 bg-blue-500/10 text-blue-800 dark:text-blue-200";
+      return "text-blue-500/70 text-blue-800 dark:text-blue-200";
     case "today":
-      return "border-orange-500/80 bg-orange-500/15 text-orange-900 dark:text-orange-100";
+      return "text-orange-500/80 text-orange-900 dark:text-orange-100";
     case "overdue":
-      return "border-destructive/80 bg-destructive/10 text-destructive";
+      return "text-destructive/80 text-destructive";
     default:
       return "";
   }