Improve analysis group headings

frontend/src/views/AnalysisPage.tsx

@@ -856,17 +856,22 @@ export function AnalysisPage({ onNavigate }: AnalysisPageProps) {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {ticketSections.map((section) => (
+                {ticketSections.map((section, sectionIndex) => (
                   <Fragment key={section.key}>
                     {ticketViewSettings.groupBy !== "none" ? (
-                      <TableRow className="bg-muted/40 hover:bg-muted/40">
+                      <TableRow className={`${sectionIndex > 0 ? "border-t-[12px] border-t-background" : ""} border-b-2 border-border bg-muted/70 hover:bg-muted/70`}>
-                        <TableCell colSpan={9}>
+                        <TableCell colSpan={9} className="py-0">
+                          <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border/80 bg-card px-3 py-2 shadow-sm">
+                            <div className="flex min-w-0 items-center gap-2">
+                              <span className="rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground">Gruppe</span>
+                              <span className="truncate text-base font-semibold">{section.label}</span>
+                            </div>
                             <div className="flex flex-wrap items-center gap-2">
-                            <span className="font-semibold">{section.label}</span>
                               <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
                               <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
                               {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
                             </div>
+                          </div>
                         </TableCell>
                       </TableRow>
                     ) : null}
@@ -902,15 +907,20 @@ export function AnalysisPage({ onNavigate }: AnalysisPageProps) {
           </div>
 
           <div className="space-y-2 md:hidden">
-            {ticketSections.map((section) => (
+            {ticketSections.map((section, sectionIndex) => (
-              <div key={section.key} className="space-y-2">
+              <div key={section.key} className={`space-y-2 ${ticketViewSettings.groupBy !== "none" && sectionIndex > 0 ? "pt-3" : ""}`}>
                 {ticketViewSettings.groupBy !== "none" ? (
-                  <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2">
+                  <div className="rounded-md border-2 border-border bg-card px-3 py-2 shadow-sm">
-                    <span className="font-semibold">{section.label}</span>
+                    <div className="mb-2 flex min-w-0 items-center gap-2">
+                      <span className="rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground">Gruppe</span>
+                      <span className="truncate text-base font-semibold">{section.label}</span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
                       <Badge variant="outline">{section.ticketCount} Ticket(s)</Badge>
                       <Badge variant="outline">{formatMinutes(section.totalMinutes)}</Badge>
                       {section.openCount > 0 ? <Badge variant="warning">{section.openCount} offen</Badge> : <Badge variant="success">bewertet</Badge>}
                     </div>
+                  </div>
                 ) : null}
                 {section.tickets.map((ticket) => (
                   <div key={ticket.id} className="space-y-2 rounded-md border bg-background p-3">