feat: fix android display

frontend/src/assets/main.css

@@ -1,4 +1,10 @@
 /* Global Styles & Resets */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
 
 :root {
@@ -21,6 +27,7 @@ body {
   color: var(--text-dark);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
 }
 
 /* App Container */
@@ -30,6 +37,8 @@ body {
   align-items: center;
   padding: 0 2rem;
   min-height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 /* Header */
@@ -90,13 +99,46 @@ body {
   gap: 0.5rem;
 }
 
-.email-input {
-  width: 100%;
+.input-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
   max-width: 400px;
-  padding: 0.75rem 1rem;
+}
+
+.email-input {
+  flex: 1;
+  /* top, right, bottom, left */
+  padding: 0.75rem 3rem 0.75rem 1rem;
   border: 1px solid transparent;
   border-radius: 8px;
   font-size: 1rem;
+  width: 100%;
+}
+
+.btn-copy {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--dark-grey);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 6px;
+}
+
+.btn-copy:hover {
+  background-color: var(--medium-grey);
+}
+
+.btn-copy span {
+  color: var(--primary-purple);
+  font-weight: bold;
 }
 
 .email-input:focus {
@@ -299,15 +341,88 @@ body {
 
 /* Responsive */
 @media (max-width: 768px) {
+  body {
+    -webkit-text-size-adjust: 100%; /* Prevent iOS font scaling */
+  }
+
+  #app {
+    padding: 0 1rem;
+  }
+
+  .app-header {
+    padding: 1rem 0; /* Adjust padding for mobile */
+    /* Keep flex row layout for alignment */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .nav-links {
+    margin-left: 0; /* Reset margin for mobile */
+  }
+  
+  .nav-links a {
+    margin: 0 0 0 1rem; /* Space out the links */
+  }
+
+  .hero-section {
+    padding: 2rem 1.5rem;
+    margin-bottom: 1.5rem;
+    text-align: center; /* Ensure content is centered on mobile */
+  }
+
+  .hero-section h1 {
+    font-size: 1.8rem;
+  }
+
+  .hero-section p {
+    font-size: 1rem;
+  }
+
+  .input-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .email-input {
+    max-width: none; /* Remove max-width on mobile */
+  }
+
+  .inbox-section {
+    min-width: 0; /* Reset min-width */
+    padding: 1rem;
+  }
+
   .inbox-container {
     flex-direction: column;
+    min-height: auto;
+    gap: 1rem;
   }
-  .message-list, .message-detail {
+
+  .message-list,
+  .message-detail {
     width: 100%;
     border-right: none;
     padding-right: 0;
   }
-  .input-group {
-    flex-direction: column;
+  
+  .message-list {
+    border-bottom: 1px solid var(--medium-grey);
+    padding-bottom: 1rem;
+  }
+
+  .message-detail .empty-state {
+    padding: 2rem 0;
+  }
+
+  .message-body {
+    height: auto; /* Adjust height for mobile */
+    max-height: 400px;
+  }
+  
+  .modal-content {
+    width: 95%;
+    padding: 1.5rem;
   }
 }