diff --git a/addons/rose/addon/styles/rose/components/_message.scss b/addons/rose/addon/styles/rose/components/_message.scss index 7aa35e13c..858ea5c0b 100644 --- a/addons/rose/addon/styles/rose/components/_message.scss +++ b/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)}; diff --git a/addons/rose/addon/styles/rose/components/nav/_tabs.scss b/addons/rose/addon/styles/rose/components/nav/_tabs.scss index dea7dc066..2e2ca44f3 100644 --- a/addons/rose/addon/styles/rose/components/nav/_tabs.scss +++ b/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); diff --git a/ui/core/app/components/form/account/password/change-password/index.hbs b/ui/core/app/components/form/account/password/change-password/index.hbs index e3ebf0775..156bc26d1 100644 --- a/ui/core/app/components/form/account/password/change-password/index.hbs +++ b/ui/core/app/components/form/account/password/change-password/index.hbs @@ -1,4 +1,5 @@ .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); diff --git a/ui/core/app/templates/scopes/scope/authenticate/method.hbs b/ui/core/app/templates/scopes/scope/authenticate/method.hbs index 589acdbfa..f45762068 100644 --- a/ui/core/app/templates/scopes/scope/authenticate/method.hbs +++ b/ui/core/app/templates/scopes/scope/authenticate/method.hbs @@ -1,4 +1,5 @@