fix(auth): make view container responsive (aws#5700)

make auth container responsive

# Before - The content scales down to 0.6x when the width in less than
260px

https://github.com/user-attachments/assets/d38db517-4734-435f-8100-b6a65d502c75

# After
## Login Screen

https://github.com/user-attachments/assets/17b579e1-003f-42aa-967e-7565e66624f0

## Re-Auth Screen

https://github.com/user-attachments/assets/2cd8754d-6707-4cd4-a250-7b28a0cd7de5



License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Author: ivikash

packages/core/src/login/webview/vue/base.css

@@ -9,9 +9,3 @@
     /* Alignment */
     --auth-container-top: 15%;
 }
-
-@media (max-width: 260px) {
-    body {
-        scale: 0.6;
-    }
-}

packages/core/src/login/webview/vue/login.vue

@@ -592,7 +592,8 @@ export default defineComponent({
     margin: auto;
     position: absolute;
     top: var(--auth-container-top);
-    width: 260px;
+    max-width: 260px;
+    width: 90vw;
 }
 
 .header {

packages/core/src/login/webview/vue/reauthenticate.vue

@@ -169,12 +169,14 @@ export default defineComponent({
     justify-content: space-between;
     /** The overall height of the container, then spacing is automatic between child elements */
     height: 7rem;
+    text-align: center;
 }
 
 #content-container > * {
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-align: center;
 }
 
 #icon-container {
@@ -203,6 +205,7 @@ button#reauthenticate {
     padding: 0.3rem;
     width: 80%;
     user-select: none;
+    max-width: 260px;
 }
 
 button#signout {

packages/core/src/login/webview/vue/selectableItem.vue

@@ -188,4 +188,10 @@ body.vscode-high-contrast:not(body.vscode-high-contrast-light) .icon .svg-path {
 body.vscode-high-contrast-light .icon .svg-path {
     fill: black;
 }
+
+.item-container-base .text .p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>