From 25459216bc323a232c5df268bb4c9ad20ff2f593 Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Wed, 15 Apr 2026 13:29:17 +0200
Subject: [PATCH] fix: refine task card header spacing

---
 app/static/css/style.css           | 58 ++++++++++++++++++++++++++++++
 app/templates/partials/macros.html |  2 +-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 7c435c4..9929b71 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -433,8 +433,37 @@ p {
   padding: 20px;
 }
 
+.task-card__top {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.task-card__title-block {
+  display: grid;
+  gap: 10px;
+}
+
+.task-card__top > div:first-child,
+.task-card__title-block {
+  min-width: 0;
+}
+
+.task-card__title-block .chip-row {
+  gap: 8px;
+}
+
+.task-card__top .icon-button {
+  align-self: flex-start;
+  margin-top: 2px;
+}
+
 .task-card h3 {
   font-size: 1.35rem;
+  line-height: 1.08;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .task-card--compact {
@@ -1252,6 +1281,35 @@ p {
 }
 
 @media (max-width: 640px) {
+  .task-card {
+    gap: 14px;
+    padding: 18px;
+  }
+
+  .task-card__top {
+    gap: 10px;
+  }
+
+  .task-card__title-block {
+    gap: 8px;
+  }
+
+  .task-card__title-block .chip-row {
+    gap: 6px;
+  }
+
+  .task-card__top .icon-button {
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    margin-top: 0;
+  }
+
+  .task-card h3 {
+    font-size: 1.15rem;
+  }
+
   .form-panel h2 {
     font-size: 1.85rem;
     line-height: 1.08;
diff --git a/app/templates/partials/macros.html b/app/templates/partials/macros.html
index 8c42e15..cd6041a 100644
--- a/app/templates/partials/macros.html
+++ b/app/templates/partials/macros.html
@@ -45,7 +45,7 @@
 {% macro task_card(task, current_user, compact=false) -%}
   <article class="task-card {% if compact %}task-card--compact{% endif %}">
     <div class="task-card__top">
-      <div>
+      <div class="task-card__title-block">
         <div class="chip-row">
           {{ status_badge(task) }}
           <span class="point-pill">{{ task.points_awarded }} Punkte{% if task.is_shared_assignment %} / Person{% endif %}</span>