fix(web): make login responsive

apps/web_v1/src/App.css

@@ -59,8 +59,10 @@
 }
 
 .login-card.arco-card {
-  width: min(1180px, 96vw);
+  width: min(960px, 100%);
   min-height: 430px;
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
   overflow: hidden;
   border-color: var(--color-border);
   border-radius: var(--radius-control);
@@ -68,20 +70,19 @@
 }
 
 .login-card .arco-card-body {
-  display: grid;
-  grid-template-columns: 1fr 1.1fr 1fr;
+  display: contents;
   padding: 0;
 }
 
 .login-brand-panel,
-.login-form-panel,
-.login-value-panel {
+.login-form-panel {
+  min-width: 0;
   min-height: 430px;
   padding: 42px;
+  box-sizing: border-box;
 }
 
-.login-brand-panel,
-.login-form-panel {
+.login-brand-panel {
   border-right: 1px solid var(--color-border);
 }
 
@@ -125,16 +126,6 @@
   font-weight: 600;
 }
 
-.login-footer-links {
-  align-self: end;
-  flex-wrap: wrap;
-  margin-top: 72px;
-}
-
-.login-footer-links .arco-typography {
-  white-space: nowrap;
-}
-
 .login-form-panel {
   display: grid;
   align-content: center;
@@ -144,6 +135,12 @@
   margin-top: 20px;
 }
 
+.login-form .arco-input-wrapper,
+.login-form .arco-input-password,
+.login-form > .arco-btn {
+  width: 100%;
+}
+
 .login-row {
   display: flex;
   align-items: center;
@@ -179,35 +176,6 @@
   font-weight: 600;
 }
 
-.login-value-panel {
-  display: grid;
-  align-content: center;
-  gap: 18px;
-}
-
-.value-point {
-  display: grid;
-  grid-template-columns: 42px 1fr;
-  gap: var(--space-3);
-  align-items: center;
-}
-
-.value-point > span {
-  width: 42px;
-  height: 42px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--color-soft-blue);
-  color: var(--color-primary);
-  font-size: 22px;
-}
-
-.value-title {
-  display: block;
-  font-weight: 700;
-}
-
 .workbench-shell {
   height: 100vh;
   display: grid;
@@ -2029,23 +1997,47 @@
   padding-top: 14px;
 }
 
-@media (max-width: 1180px) {
-  .workbench-shell {
-    min-width: 1180px;
+@media (max-width: 760px) {
+  .login-screen {
+    place-items: start stretch;
+    padding: 16px;
   }
 
-  .login-card .arco-card-body {
+  .login-card.arco-card {
     grid-template-columns: 1fr;
+    min-height: 0;
   }
 
   .login-brand-panel,
   .login-form-panel {
     min-height: auto;
+    padding: 24px;
+  }
+
+  .login-brand-panel {
     border-right: 0;
     border-bottom: 1px solid var(--color-border);
   }
 
-  .login-value-panel {
-    min-height: auto;
+  .login-row,
+  .connection-card {
+    grid-template-columns: 1fr;
+  }
+
+  .login-row {
+    align-items: stretch;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .login-row .arco-btn,
+  .connection-card .arco-btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1180px) {
+  .workbench-shell {
+    min-width: 1180px;
   }
 }