feat: mobile Responsiveness für Suche und Mail-Detailansicht

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/mail/[id]/page.tsx

@@ -168,11 +168,12 @@ function MailBodyView({ mail }: { mail: MailDetail }) {
       <div className="space-y-2">
         {!showExternal && (
           <Alert>
-            <AlertDescription className="flex items-center justify-between gap-4 text-sm">
+            <AlertDescription className="flex flex-col items-start gap-2 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
               <span>Externe Inhalte (Bilder, Tracker) sind blockiert.</span>
               <Button
                 variant="outline"
                 size="sm"
+                className="w-full sm:w-auto"
                 onClick={() => setShowExternal(true)}
               >
                 Externe Inhalte laden
@@ -346,8 +347,8 @@ export default function MailViewPage({
           </Button>
 
           {mail && (
-            <div className="flex items-center gap-2">
-              <Badge variant="outline" className="font-mono text-xs">
+            <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
+              <Badge variant="outline" className="max-w-[40vw] truncate font-mono text-xs sm:max-w-none">
                 {id}
               </Badge>
               <Button