From f4e9ee2958c02f8832525f25d89fbc40d96eaef8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 14:28:17 +0100 Subject: [PATCH 1/8] Update Container styles Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Container/styles.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css index 7c7c323cb5..19c6f7ecc5 100644 --- a/packages/canon/src/components/Container/styles.css +++ b/packages/canon/src/components/Container/styles.css @@ -1,5 +1,17 @@ .canon-Container { - max-width: 75rem; + max-width: 120rem; padding: 0 1rem; margin: 0 auto; } + +@media (min-width: 640px) { + .canon-Container { + padding: 0 2rem; + } +} + +@media (min-width: 1024px) { + .canon-Container { + padding: 0 3rem; + } +} From 24f0e0833381e96feec9431f46499fc80aa23106 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 14:29:51 +0100 Subject: [PATCH 2/8] Create long-hornets-share.md Signed-off-by: Charles de Dreuille --- .changeset/long-hornets-share.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/long-hornets-share.md diff --git a/.changeset/long-hornets-share.md b/.changeset/long-hornets-share.md new file mode 100644 index 0000000000..039b9f28a6 --- /dev/null +++ b/.changeset/long-hornets-share.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Improved Container styles, changing our max-width to 120rem and improving padding on smaller screens. From 8ed7d709d7f748994e1576e80aa52461048fed6f Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 14:43:29 +0100 Subject: [PATCH 3/8] Update styles.css Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Container/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css index 19c6f7ecc5..0e9764e0db 100644 --- a/packages/canon/src/components/Container/styles.css +++ b/packages/canon/src/components/Container/styles.css @@ -1,5 +1,5 @@ .canon-Container { - max-width: 120rem; + max-width: min(120rem, 100%); padding: 0 1rem; margin: 0 auto; } From 394ffff6f448fc843b0d75d46c49494bbc16b9aa Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 14:44:19 +0100 Subject: [PATCH 4/8] Build CSS Signed-off-by: Charles de Dreuille --- packages/canon/css/components.css | 14 +++++++++++++- packages/canon/css/container.css | 14 +++++++++++++- packages/canon/css/styles.css | 14 +++++++++++++- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index bc473d2006..a4291f7823 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -103,11 +103,23 @@ } .canon-Container { - max-width: 75rem; + max-width: min(120rem, 100%); margin: 0 auto; padding: 0 1rem; } +@media (width >= 640px) { + .canon-Container { + padding: 0 2rem; + } +} + +@media (width >= 1024px) { + .canon-Container { + padding: 0 3rem; + } +} + .canon-Icon { width: 1rem; height: 1rem; diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css index d9fe861f3b..bcdd296ca2 100644 --- a/packages/canon/css/container.css +++ b/packages/canon/css/container.css @@ -1,5 +1,17 @@ .canon-Container { - max-width: 75rem; + max-width: min(120rem, 100%); margin: 0 auto; padding: 0 1rem; } + +@media (width >= 640px) { + .canon-Container { + padding: 0 2rem; + } +} + +@media (width >= 1024px) { + .canon-Container { + padding: 0 3rem; + } +} diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index b5093e217c..bb56f7c309 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -9309,11 +9309,23 @@ } .canon-Container { - max-width: 75rem; + max-width: min(120rem, 100%); margin: 0 auto; padding: 0 1rem; } +@media (width >= 640px) { + .canon-Container { + padding: 0 2rem; + } +} + +@media (width >= 1024px) { + .canon-Container { + padding: 0 3rem; + } +} + .canon-Icon { width: 1rem; height: 1rem; From b492707737eb5f6eb3414435a371fb63be81e09a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 14:53:12 +0100 Subject: [PATCH 5/8] Update styles.css Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Container/styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css index 0e9764e0db..757628aba4 100644 --- a/packages/canon/src/components/Container/styles.css +++ b/packages/canon/src/components/Container/styles.css @@ -1,17 +1,17 @@ .canon-Container { - max-width: min(120rem, 100%); - padding: 0 1rem; + max-width: 120rem; + padding: 0 var(--canon-space-4); margin: 0 auto; } @media (min-width: 640px) { .canon-Container { - padding: 0 2rem; + padding: 0 var(--canon-space-8); } } @media (min-width: 1024px) { .canon-Container { - padding: 0 3rem; + padding: 0 var(--canon-space-12); } } From bdd2eaae6074a26c35be8314622d2f00d4742c34 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 14:54:06 +0100 Subject: [PATCH 6/8] Build CSS Signed-off-by: Charles de Dreuille --- packages/canon/css/components.css | 8 ++++---- packages/canon/css/container.css | 8 ++++---- packages/canon/css/styles.css | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index a4291f7823..7d22371ec3 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -103,20 +103,20 @@ } .canon-Container { - max-width: min(120rem, 100%); + max-width: 120rem; + padding: 0 var(--canon-space-4); margin: 0 auto; - padding: 0 1rem; } @media (width >= 640px) { .canon-Container { - padding: 0 2rem; + padding: 0 var(--canon-space-8); } } @media (width >= 1024px) { .canon-Container { - padding: 0 3rem; + padding: 0 var(--canon-space-12); } } diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css index bcdd296ca2..86329e4c30 100644 --- a/packages/canon/css/container.css +++ b/packages/canon/css/container.css @@ -1,17 +1,17 @@ .canon-Container { - max-width: min(120rem, 100%); + max-width: 120rem; + padding: 0 var(--canon-space-4); margin: 0 auto; - padding: 0 1rem; } @media (width >= 640px) { .canon-Container { - padding: 0 2rem; + padding: 0 var(--canon-space-8); } } @media (width >= 1024px) { .canon-Container { - padding: 0 3rem; + padding: 0 var(--canon-space-12); } } diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index bb56f7c309..6017eacf0e 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -9309,20 +9309,20 @@ } .canon-Container { - max-width: min(120rem, 100%); + max-width: 120rem; + padding: 0 var(--canon-space-4); margin: 0 auto; - padding: 0 1rem; } @media (width >= 640px) { .canon-Container { - padding: 0 2rem; + padding: 0 var(--canon-space-8); } } @media (width >= 1024px) { .canon-Container { - padding: 0 3rem; + padding: 0 var(--canon-space-12); } } From ff94314f04d340d36836c73e9182e7a9f152518a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 3 Apr 2025 15:07:12 +0100 Subject: [PATCH 7/8] Update styles.css Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Container/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css index 757628aba4..1ebf63987f 100644 --- a/packages/canon/src/components/Container/styles.css +++ b/packages/canon/src/components/Container/styles.css @@ -2,6 +2,7 @@ max-width: 120rem; padding: 0 var(--canon-space-4); margin: 0 auto; + transition: padding 0.2s ease-in-out; } @media (min-width: 640px) { From 92e3a5ad3caf9f8ed8c224a41981691913061054 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 4 Apr 2025 11:31:42 +0100 Subject: [PATCH 8/8] Add transition Signed-off-by: Charles de Dreuille --- packages/canon/css/components.css | 1 + packages/canon/css/container.css | 1 + packages/canon/css/styles.css | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index 7d22371ec3..bcd347382c 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -106,6 +106,7 @@ max-width: 120rem; padding: 0 var(--canon-space-4); margin: 0 auto; + transition: padding .2s ease-in-out; } @media (width >= 640px) { diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css index 86329e4c30..4ba6b65dee 100644 --- a/packages/canon/css/container.css +++ b/packages/canon/css/container.css @@ -2,6 +2,7 @@ max-width: 120rem; padding: 0 var(--canon-space-4); margin: 0 auto; + transition: padding .2s ease-in-out; } @media (width >= 640px) { diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index 6017eacf0e..37c5cb4d2d 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -9312,6 +9312,7 @@ max-width: 120rem; padding: 0 var(--canon-space-4); margin: 0 auto; + transition: padding .2s ease-in-out; } @media (width >= 640px) {