Merge pull request #233 from hashicorp/chore-form-width

Chore form width

addons/rose/addon/styles/rose/components/_message.scss

@@ -10,6 +10,10 @@
   width: sizing.rems(l) * 15; //16 rems/320 px
   margin-bottom: sizing.rems(l);
 
+  @media (max-width: media.width(small)) {
+    width: auto;
+  }
+
   // Icons always need tweaking
   .rose-icon {
     --size: #{sizing.rems(m)};

addons/rose/addon/styles/rose/components/nav/_tabs.scss

@@ -3,6 +3,7 @@
 
 .rose-nav-tabs {
   display: flex;
+  flex-wrap: wrap;
   margin-bottom: sizing.rems(m);
   box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-gray-subtler-2);
 

ui/core/app/components/form/account/password/change-password/index.hbs

@@ -1,4 +1,5 @@
 <Rose::Form
+  class="full-width"
   @onSubmit={{fn this.submit @submit}}
   @cancel={{fn this.cancel @cancel}}
   @disabled={{@model.isSaving}}

ui/core/app/styles/app.scss

@@ -1,8 +1,23 @@
 @use 'rose/variables/sizing';
+@use 'rose/variables/media';
 
 @import 'rose';
 @import 'notify';
 
+.rose-layout-centered {
+  > .rose-layout-page {
+    width: sizing.rems(l) * 18;
+  }
+
+  @media (max-width: media.width(small)) {
+    display: block;
+
+    > .rose-layout-page {
+      width: auto;
+    }
+  }
+}
+
 .rose-nav-sidebar {
   margin-bottom: sizing.rems(l);
   margin-top: sizing.rems(xxl);

ui/core/app/templates/scopes/scope/authenticate/method.hbs

@@ -1,4 +1,5 @@
 <Rose::Form
+  class="full-width"
   @onSubmit={{route-action "authenticate" (hash
     identification=this.identification
     password=this.password

ui/core/translations/en-us.yaml

@@ -4,7 +4,7 @@ auth:
   descriptions:
     no-scopes: No scopes were found.  To authenticate, ask your administrator to create an scope and grant you access.
     choose-org: Choose a scope to authenticate.
-    authenticating-with-org: "You're authenticating with {name}."
+    authenticating-with-org: "You are authenticating with {name}."
 titles:
   iam: IAM
   new: New