From 38256c7e90a26a8c621f65bad983e15be2db953c Mon Sep 17 00:00:00 2001 From: Sammy-T Date: Fri, 5 Mar 2021 19:18:31 -0500 Subject: [PATCH 1/3] Contain login field widths on smaller displays --- components/layout/FormLayout.module.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index 1ae393bb..2b0f6d1f 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -11,6 +11,7 @@ .row { display: flex; + flex-wrap: wrap; align-items: center; position: relative; margin-bottom: 20px; @@ -19,6 +20,12 @@ .row > div { position: relative; + flex: 1 1; +} + +.row > div > input { + width: 100%; + min-width: 200px; } .buttons { From 1b0491588fca8040f131be22a81161cca2e95c94 Mon Sep 17 00:00:00 2001 From: Sammy-T Date: Fri, 5 Mar 2021 19:48:20 -0500 Subject: [PATCH 2/3] Extend input min-width and add padding --- components/layout/FormLayout.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index 2b0f6d1f..d7c9ff53 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -16,6 +16,7 @@ position: relative; margin-bottom: 20px; line-height: 1.8; + padding: 0 6px; } .row > div { @@ -25,7 +26,7 @@ .row > div > input { width: 100%; - min-width: 200px; + min-width: 240px; } .buttons { From 52bf53eda93f3bd5e26f576e9c4bb759b1752a57 Mon Sep 17 00:00:00 2001 From: Sammy-T Date: Mon, 8 Mar 2021 16:18:24 -0500 Subject: [PATCH 3/3] Increase row padding --- components/layout/FormLayout.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index d7c9ff53..f6171d2d 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -16,7 +16,7 @@ position: relative; margin-bottom: 20px; line-height: 1.8; - padding: 0 6px; + padding: 0 20px; } .row > div {