Mobile friendly version of ticket view

Refactor the header into own component, so it can be shown at "page top" for the mobile one column view.

apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx

@@ -2,7 +2,7 @@
 
 import { FC, useState, useEffect } from "react";
 import { getTicketAction, getTicketArticlesAction } from "app/_actions/tickets";
-import { Grid, Box, Typography } from "@mui/material";
+import { Grid, Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 import { Button, fonts, colors } from "@link-stack/ui";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import {
@@ -13,6 +13,7 @@ import {
   ConversationHeader,
 } from "@chatscope/chat-ui-kit-react";
 import { ArticleCreateDialog } from "./ArticleCreateDialog";
+import { TicketHeader } from "../../_components/TicketHeader";
 
 interface TicketDetailProps {
   id: string;
@@ -26,6 +27,9 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [articleKind, setArticleKind] = useState("note");
 
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down("md"));
+  
   useEffect(() => {
     const fetchTicket = async () => {
       const result = await getTicketAction(id);
@@ -66,36 +70,11 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
         <>
           <MainContainer>
             <ChatContainer>
-              <ConversationHeader>
+              {!mobile && (<ConversationHeader>
                 <ConversationHeader.Content>
-                  <Box
-                    sx={{
-                      width: "100%",
-                      textAlign: "center",
-                      fontWeight: "bold",
-                    }}
-                  >
-                    <Typography
-                      variant="h5"
-                      sx={{
-                        fontFamily: poppins.style.fontFamily,
-                        fontWeight: 700,
-                      }}
-                    >
-                      {ticket.title}
-                    </Typography>
-                    <Typography
-                      variant="h6"
-                      sx={{
-                        fontFamily: roboto.style.fontFamily,
-                        fontWeight: 400,
-                      }}
-                    >{`Ticket #${ticket.number} (created ${new Date(
-                      ticket.createdAt,
-                    ).toLocaleDateString()})`}</Typography>
-                  </Box>
+                  <TicketHeader ticket={ticket} />
                 </ConversationHeader.Content>
-              </ConversationHeader>
+              </ConversationHeader>)}
               <MessageList style={{ marginBottom: 80 }}>
                 {ticketArticles.edges.map(({ node: article }: any) => (
                   <Message