Update

frontend/src/App.tsx

@@ -30,7 +30,7 @@ import {
   UserCircle,
   X,
 } from "lucide-react";
-import { FormEvent, MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import { FormEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { toast } from "sonner";
 
@@ -781,6 +781,7 @@ export function App() {
   const [ticketReturnPaths, setTicketReturnPaths] = useState<Record<string, string>>({});
   const [draggedOpenTicketKey, setDraggedOpenTicketKey] = useState<string | null>(null);
   const [sidebarTodos, setSidebarTodos] = useState<TicketTodo[]>([]);
+  const openTicketsListRef = useRef<HTMLDivElement | null>(null);
 
   const navigate = useCallback(
     (to: string) => {
@@ -875,6 +876,11 @@ export function App() {
     );
   }, [currentUser, openTickets]);
 
+  useEffect(() => {
+    const activeTicket = openTicketsListRef.current?.querySelector<HTMLElement>("[data-open-ticket-active='true']");
+    activeTicket?.scrollIntoView({ block: "nearest" });
+  }, [path, openTickets]);
+
   useEffect(() => {
     if (!currentUser || currentUser.role === "admin" || !timersLoaded || timerOwnerId !== currentUser.id) {
       return;
@@ -1306,9 +1312,10 @@ export function App() {
           {!isAdmin ? <SidebarTodayTodos todos={sidebarTodos} onNavigate={navigate} /> : null}
 
           {!isAdmin && openTickets.length > 0 ? (
-	            <SidebarGroup className="pt-0 group-data-[collapsible=icon]:hidden">
+            <SidebarGroup className="min-h-0 flex-1 pt-0 group-data-[collapsible=icon]:hidden">
               <SidebarGroupLabel className="h-6 px-2 text-xs">Geöffnete Tickets</SidebarGroupLabel>
-              <SidebarGroupContent>
+              <SidebarGroupContent className="min-h-0 flex-1 overflow-hidden">
+                <div ref={openTicketsListRef} className="max-h-[clamp(8rem,calc(100svh-31rem),24rem)] overflow-y-auto overscroll-contain pr-1 [scrollbar-gutter:stable] [scrollbar-width:thin]">
                   <SidebarMenu>
                     {openTickets.map((ticket) => {
                       const isActive = pathWithoutSearch(path) === pathWithoutSearch(ticket.path);
@@ -1316,6 +1323,7 @@ export function App() {
                       return (
                         <SidebarMenuItem key={ticket.key}>
                           <div
+                            data-open-ticket-active={isActive ? "true" : undefined}
                             draggable
                             onDragStart={(event) => startOpenTicketDrag(event, ticket)}
                             onDragOver={(event) => overOpenTicket(event, ticket)}
@@ -1357,6 +1365,7 @@ export function App() {
                       );
                     })}
                   </SidebarMenu>
+                </div>
               </SidebarGroupContent>
             </SidebarGroup>
           ) : null}

frontend/src/app/globals.css

@@ -53,6 +53,7 @@
   --font-heading: var(--font-sans);
   --font-sans: var(--font-sans);
   --breakpoint-xxl: 108.125rem;
+  --breakpoint-details: 85rem;
 
 }
 

frontend/src/views/TicketDetailPage.tsx

@@ -1242,7 +1242,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
         </Alert>
       ) : null}
 
-      <div className={cn("grid gap-4", isGlobalTicket && "xxl:grid-cols-2")}>
+      <div className={cn("grid gap-4", isGlobalTicket && "details:grid-cols-2")}>
         {isGlobalTicket ? (
           <Card>
             <CardHeader className="p-4">
@@ -1300,7 +1300,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
             </div>
           </CardHeader>
           <CardContent className="px-4 pb-4">
-            <form className="grid gap-3 md:grid-cols-2" onSubmit={saveTicketData}>
+            <form className="grid grid-cols-2 gap-3 [@media_(min-width:85rem)_and_(max-width:108.124rem)]:grid-cols-1 xxl:grid-cols-2" onSubmit={saveTicketData}>
               <div className="space-y-2">
                 <label className="text-sm font-medium" htmlFor="edit-ticket-number">Ticketnummer</label>
                 <Input id="edit-ticket-number" value={editTicketNumber} disabled={!canEditTicketData} onChange={(event) => setEditTicketNumber(event.currentTarget.value)} required />
@@ -1338,7 +1338,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate, onO
                   required
                 />
               </div>
-              <Button type="submit" className="md:col-span-2 md:justify-self-end" disabled={!canEditTicketData || savingTicket}>
+              <Button type="submit" className="col-span-2 justify-self-end [@media_(min-width:85rem)_and_(max-width:108.124rem)]:col-span-1 xxl:col-span-2" disabled={!canEditTicketData || savingTicket}>
                 <Save className="size-4" />
                 {savingTicket ? "Speichert..." : "Speichern"}
               </Button>