From 14f674105b9d91beecfeeaf61ca4bd5917b05fb2 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 6 Apr 2026 18:01:24 +0200
Subject: [PATCH] [call-me] - fix: improve sign-in card and attribution
 responsiveness on mobile

---
 public/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/public/style.css b/public/style.css
index d7b5e1b..eb716f5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2584,10 +2584,12 @@ z-index:
 .direct-call-row {
     display: flex;
     gap: var(--spacing-sm);
+    min-width: 0;
 }
 
 .direct-call-row input {
     flex: 1;
+    min-width: 0;
     padding: 12px 16px;
     font-size: 15px;
     color: var(--text-color);
@@ -2623,6 +2625,7 @@ z-index:
     display: inline-flex;
     align-items: center;
     gap: 6px;
+    flex-shrink: 0;
 }
 
 .btn-call-now:hover {
@@ -3003,4 +3006,73 @@ z-index:
         width: 100%;
         justify-content: center;
     }
+
+    /* Sign-in card: reduce padding on mobile */
+    .card-header {
+        padding: var(--spacing-md) !important;
+    }
+
+    .card-header h1 {
+        font-size: var(--font-size-xl) !important;
+    }
+
+    .card-body {
+        padding: var(--spacing-md) !important;
+    }
+
+    /* Attribution: prevent overlap with card on short viewports */
+    #attribution {
+        position: fixed;
+        bottom: var(--spacing-xs);
+        right: var(--spacing-xs);
+        font-size: 0.65rem;
+        padding: var(--spacing-xs) var(--spacing-sm);
+        max-width: 60%;
+        z-index: 3;
+    }
+}
+
+/* Very small screens: further compact the sign-in card */
+@media (max-width: 480px) {
+    .card {
+        max-width: 95% !important;
+    }
+
+    .card-header {
+        padding: var(--spacing-sm) var(--spacing-md) !important;
+    }
+
+    .card-body {
+        padding: var(--spacing-sm) var(--spacing-md) !important;
+    }
+
+    .sign-in-subtitle {
+        font-size: var(--font-size-xs);
+    }
+
+    .media-toggle-item {
+        padding: 8px var(--spacing-sm);
+        gap: var(--spacing-sm);
+    }
+
+    .media-toggle-icon {
+        width: 32px;
+        height: 32px;
+        font-size: var(--font-size-sm);
+    }
+}
+
+/* Landscape mobile: ensure card and attribution don't collide */
+@media (max-width: 768px) and (orientation: landscape) {
+    #signInPage {
+        overflow-y: auto;
+        max-height: 100vh;
+        padding-bottom: 32px;
+    }
+
+    #attribution {
+        position: fixed;
+        bottom: var(--spacing-xs);
+        right: var(--spacing-xs);
+    }
 }