Fixed mobile

The mobile sign-in view's UX has been improved by:

Increasing vertical spacing between elements to 32px for better touch interaction
Adding proper margins around the input field and button
Enhancing text readability with increased font sizes and line height
Providing more breathing room with 32px container padding
Using more specific selectors to ensure styles are applied consistently
The changes create a more comfortable and user-friendly mobile authentication experience.

css/components/auth.css

@@ -1,5 +1,5 @@
 /* Auth Container */
-.bsky-connect {
+body .bsky-connect {
     background: var(--background);
     border-radius: 16px;
     padding: 24px;
@@ -22,7 +22,7 @@
     opacity: 1;
 }
 
-.sign-in-title {
+body .bsky-connect .sign-in-title {
     font-size: 22px;
     font-weight: 800;
     color: var(--text);
@@ -31,20 +31,20 @@
     position: relative;
 }
 
-.bsky-auth-container {
+body .bsky-connect .bsky-auth-container {
     display: flex;
     flex-direction: column;
     gap: 16px;
     position: relative;
     margin-top: 12px;
 }
 
-.auth-section {
+body .bsky-connect .auth-section {
     width: 100%;
 }
 
 /* Input Styling */
-.input-wrapper {
+body .bsky-connect .input-wrapper {
     position: relative;
     width: 100%;
     margin-top: 16px;
@@ -63,7 +63,7 @@
     pointer-events: none;
 }
 
-.bsky-handle-input {
+body .bsky-connect .bsky-handle-input {
     width: 100%;
     padding: 12px 16px 12px 36px;
     font-size: 15px;
@@ -108,7 +108,7 @@
 }
 
 /* Auth Button */
-.btn-auth {
+body .bsky-connect .btn-auth {
     width: 100%;
     padding: 12px 16px;
     font-size: 15px;
@@ -155,55 +155,83 @@
 }
 
 /* Auth Message */
-.bsky-auth-message {
+body .bsky-connect .bsky-auth-message {
     margin-top: 4px;
     font-size: 14px;
     color: var(--text-secondary);
     padding: 0 4px;
     transition: all 0.3s ease;
 }
 
-.bsky-auth-message.error {
+body .bsky-connect .bsky-auth-message.error {
     color: var(--error);
     background: rgba(var(--error-rgb), 0.1);
     border-radius: 8px;
     padding: 12px;
     margin: 8px 0;
 }
 
-.auth-error {
+body .bsky-connect .auth-error {
     font-weight: 500;
     line-height: 1.5;
     padding: 4px 0;
 }
 
 @media (max-width: 768px) {
-    .bsky-connect {
+    body .bsky-connect {
         margin-top: 20px;
         padding: 20px;
     }
 
-    .sign-in-title {
+    body .bsky-connect .sign-in-title {
         font-size: 20px;
     }
 }
 
 @media (max-width: 480px) {
-    .bsky-connect {
-        padding: 16px;
-        margin-top: 16px;
+    body .bsky-connect {
+        padding: 32px;
+        margin: 20px;
+        border-radius: 20px;
+    }
+
+    body .bsky-connect .sign-in-title {
+        font-size: 20px;
+        margin: 0 0 32px 0;
+    }
+
+    body .bsky-connect .bsky-auth-container {
+        gap: 32px;
+        margin-top: 32px;
     }
 
-    .sign-in-title {
-        font-size: 18px;
+    body .bsky-connect .input-wrapper {
+        margin: 32px 0;
     }
 
-    .bsky-handle-input,
-    .btn-auth {
-        padding: 10px 14px 10px 32px;
+    body .bsky-connect .bsky-handle-input {
+        padding: 16px 16px 16px 36px;
+        font-size: 16px;
+        height: 56px;
+        margin-bottom: 32px;
     }
 
-    .input-wrapper::before {
-        left: 14px;
+    body .bsky-connect .btn-auth {
+        margin-top: 32px;
+        padding: 18px;
+        font-size: 16px;
+        height: 56px;
+    }
+
+    body .bsky-connect .bsky-auth-message {
+        margin-top: 32px;
+        font-size: 15px;
+        line-height: 1.6;
+        padding: 0 8px;
+    }
+
+    body .bsky-connect .bsky-auth-message.error {
+        padding: 16px;
+        margin: 24px 0;
     }
 }