From 80ae3ff07292cd9a386ae908f1a5dcfd660776d6 Mon Sep 17 00:00:00 2001
From: Rune Olsen <rune@rune.pm>
Date: Mon, 12 Jan 2026 14:27:15 +0100
Subject: [PATCH] Made the page responsive

---
 templates/index.html | 206 ++++++++++++++++++++++++++++++++++++++++++-
 templates/login.html |  56 +++++++++++-
 2 files changed, 260 insertions(+), 2 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index c1ecc87..5c96251 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,10 +2,13 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <title>Mailcow Alias Manager</title>
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
     <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon.png') }}">
     <style>
         * {
             margin: 0;
@@ -269,6 +272,207 @@
             gap: 10px;
             justify-content: flex-end;
         }
+
+        /* Mobile Responsive Styles */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            .header-bar {
+                flex-direction: column;
+                gap: 15px;
+                margin-bottom: 15px;
+            }
+
+            .header-bar h1 {
+                font-size: 24px;
+                text-align: center;
+            }
+
+            .btn-logout {
+                width: 100%;
+            }
+
+            .action-buttons {
+                gap: 10px;
+                margin-bottom: 20px;
+            }
+
+            .btn {
+                flex: 1 1 calc(50% - 5px);
+                min-width: calc(50% - 5px);
+                padding: 14px 16px;
+                font-size: 14px;
+                text-align: center;
+            }
+
+            .btn-config {
+                margin-left: 0;
+                flex: 1 1 100%;
+                min-width: 100%;
+            }
+
+            .search-section {
+                padding: 20px 15px;
+                margin-bottom: 20px;
+            }
+
+            .search-section h2 {
+                font-size: 18px;
+                margin-bottom: 12px;
+            }
+
+            .search-container {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .search-input {
+                width: 100%;
+                font-size: 16px;
+            }
+
+            .btn-primary {
+                width: 100%;
+            }
+
+            .result-section {
+                padding: 20px 15px;
+            }
+
+            .result-section h2 {
+                font-size: 18px;
+            }
+
+            .alias-table {
+                font-size: 14px;
+                display: block;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+            }
+
+            .alias-table thead {
+                display: none;
+            }
+
+            .alias-table tbody {
+                display: block;
+            }
+
+            .alias-table tr {
+                display: block;
+                margin-bottom: 15px;
+                background-color: #252525;
+                border-radius: 5px;
+                padding: 10px;
+                border: 1px solid #404040;
+            }
+
+            .alias-table td {
+                display: block;
+                text-align: left;
+                padding: 8px 0;
+                border: none;
+            }
+
+            .alias-table td:first-child::before {
+                content: "Alias: ";
+                font-weight: bold;
+                color: #0066cc;
+            }
+
+            .alias-table td:last-child::before {
+                content: "Goes to: ";
+                font-weight: bold;
+                color: #0066cc;
+            }
+
+            .pagination {
+                flex-direction: row;
+                gap: 8px;
+                padding: 10px 0;
+            }
+
+            .pagination button {
+                flex: 1;
+                padding: 12px 10px;
+                font-size: 14px;
+            }
+
+            .pagination .page-info {
+                width: 100%;
+                text-align: center;
+                order: -1;
+                margin-bottom: 10px;
+            }
+
+            .config-modal {
+                padding: 10px;
+            }
+
+            .config-content {
+                max-width: 100%;
+                width: 100%;
+                padding: 20px 15px;
+                max-height: 90vh;
+                overflow-y: auto;
+            }
+
+            .config-content h2 {
+                font-size: 20px;
+            }
+
+            .config-content h3 {
+                font-size: 16px;
+            }
+
+            .modal-buttons {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .modal-buttons .btn {
+                width: 100%;
+                min-width: 100%;
+            }
+
+            .form-group input {
+                font-size: 16px;
+            }
+        }
+
+        /* Tablet Styles */
+        @media (min-width: 769px) and (max-width: 1024px) {
+            .container {
+                padding: 0 20px;
+            }
+
+            .btn {
+                flex: 1 1 calc(33.333% - 10px);
+            }
+
+            .btn-config {
+                margin-left: 0;
+                flex: 1 1 100%;
+            }
+        }
+
+        /* Small Mobile Devices */
+        @media (max-width: 480px) {
+            .header-bar h1 {
+                font-size: 20px;
+            }
+
+            .btn {
+                flex: 1 1 100%;
+                min-width: 100%;
+            }
+
+            .result-section h2 {
+                font-size: 16px;
+            }
+        }
     </style>
 </head>
 <body>
diff --git a/templates/login.html b/templates/login.html
index b2fe95f..a1bdfbc 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,10 +2,13 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <title>Login - Mailcow Alias Manager</title>
     <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
     <link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='favicon.png') }}">
     <style>
         * {
             margin: 0;
@@ -106,6 +109,57 @@
         .error-message.show {
             display: block;
         }
+
+        /* Mobile Responsive Styles */
+        @media (max-width: 768px) {
+            body {
+                padding: 15px;
+            }
+
+            .login-container {
+                padding: 30px 20px;
+                max-width: 100%;
+            }
+
+            h1 {
+                font-size: 22px;
+                margin-bottom: 8px;
+            }
+
+            .subtitle {
+                font-size: 13px;
+                margin-bottom: 25px;
+            }
+
+            .form-group label {
+                font-size: 14px;
+            }
+
+            .form-group input {
+                font-size: 16px;
+                padding: 14px;
+            }
+
+            .btn {
+                padding: 14px 24px;
+                font-size: 16px;
+            }
+        }
+
+        /* Small Mobile Devices */
+        @media (max-width: 480px) {
+            .login-container {
+                padding: 25px 15px;
+            }
+
+            h1 {
+                font-size: 20px;
+            }
+
+            .subtitle {
+                font-size: 12px;
+            }
+        }
     </style>
 </head>
 <body>
