Mobile Ansicht angepasst, um die Textgröße zu reduzieren und Überlauf mit Ellipsen zu verhindern.

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -189,4 +189,69 @@ footer#page-footer a:focus {
 
 #langDropdownMenuButton{
     min-width: 4vw;
-}
+}
+
+/* Additional styles for better mobile responsiveness */
+@media (max-width: 767px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .navbar-toggler {
+        margin: 0 0 0.5rem 0;
+    }
+
+    .navbar-brand {
+        font-size: 0.5rem;
+        text-align: center;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .collapse .card-text , .collapsing .card-text {
+        font-size: 0.7rem; /* Font size reduced */
+        padding-left:2rem;
+    }
+
+    .collapse.show {
+        height: 100%;
+    }
+
+    .sender-card .card-body {
+        padding: 0.5rem;
+    }
+
+    .btn_group {
+        position: fixed;
+        flex-direction: row;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        margin: 0;
+        margin-right: 1rem;
+    }
+
+    .btn_complete, .btn_refresh {
+        padding: 0.5rem;
+        font-size: 0.9rem;
+        height: 100%; /* Adjust height for better fit */
+        width: 10rem; /* Full width for better touch area */
+        margin-bottom: 0.5rem; /* Space between buttons */
+    }
+
+    .img {
+        width: 1.2rem;
+        height: 100%;
+    }
+
+    .page {
+        margin-top: 1rem;
+        max-width: 90%;
+        padding: 0.5rem;
+    }
+
+    .page section {
+        max-width: 90%;
+    }
+}