improve(ui): adapt the login modal to responsive layout

logseq · Mar 28, 2023 · be21406 · be21406
1 parent 1fe084a
commit be21406
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/main/frontend/components/user/login.css b/src/main/frontend/components/user/login.css
@@ -45,6 +45,12 @@
   }
 }
 
+@media (min-width: 30rem) {
+  [data-amplify-authenticator] [data-amplify-container] {
+    width: 100%;
+  }
+}
+
 .ui__modal[label=user-login] {
   @apply flex items-center top-0;
 
@@ -54,7 +60,7 @@
   }
 
   .panel-content {
-    @apply p-0 min-w-fit relative max-w-[600px] sm:max-w-[90vw] w-auto;
+    @apply p-0 min-w-fit relative max-w-[600px] sm:max-w-[90vw] sm:w-[500px];
   }
 
   .ui__modal-close-wrap {

diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
@@ -112,7 +112,7 @@
     .panel-content {
       overflow-y: auto;
       overflow-x: hidden;
-      width: calc(94vw - 2rem);
+      width: calc(96vw - 2rem);
       max-height: 89vh;
       padding: 2rem 1.5rem;
 
@@ -251,12 +251,6 @@ html.is-mobile {
       }
     }
   }
-
-  .ui__modal-panel .panel-content {
-    width: calc(98vw - 2rem);
-    max-width: var(--ls-main-content-max-width);
-    padding-top: 24px;
-  }
 }
 
 .ui__confirm-modal {