From 1c4fd86fe4efc3a5c2a4a3f3b8eb5f447992607d Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 3 Sep 2024 12:06:20 -0400 Subject: [PATCH 1/2] PR feedback - update token, adjust hard coded width --- packages/module/patternfly-docs/content/tokensTable.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/module/patternfly-docs/content/tokensTable.css b/packages/module/patternfly-docs/content/tokensTable.css index 2483705..d570501 100644 --- a/packages/module/patternfly-docs/content/tokensTable.css +++ b/packages/module/patternfly-docs/content/tokensTable.css @@ -2,14 +2,15 @@ height: 1em; display: inline-block; aspect-ratio: 1 / 1; - border-radius: 50%; + border-radius: var(--pf-t--global--border--radius--pill); border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--background--color--inverse--default); box-shadow: var(--pf-t--global--box-shadow--sm); } @media (min-width: 1200px) { .tokens-table-outer-wrapper { - width: calc(92vw - var(--pf-v6-c-page__sidebar--Width)); - max-width: calc(92vw - var(--pf-v6-c-page__sidebar--Width)); + /* Allow table to break out of artificial max-width, fill available space */ + width: calc(100vw - var(--pf-v6-c-page__sidebar--Width) - var(--pf-v6-c-page__main-container--MarginInlineEnd) - var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-section--PaddingInlineEnd)); + max-width: calc(100vw - var(--pf-v6-c-page__sidebar--Width) - var(--pf-v6-c-page__main-container--MarginInlineEnd) - var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-section--PaddingInlineEnd)); } } From 41f515221d2024237c28ff27e1d1581956dba11a Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 3 Sep 2024 12:11:58 -0400 Subject: [PATCH 2/2] break up styles for readibility --- .../patternfly-docs/content/tokensTable.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/tokensTable.css b/packages/module/patternfly-docs/content/tokensTable.css index d570501..255c142 100644 --- a/packages/module/patternfly-docs/content/tokensTable.css +++ b/packages/module/patternfly-docs/content/tokensTable.css @@ -10,7 +10,19 @@ @media (min-width: 1200px) { .tokens-table-outer-wrapper { /* Allow table to break out of artificial max-width, fill available space */ - width: calc(100vw - var(--pf-v6-c-page__sidebar--Width) - var(--pf-v6-c-page__main-container--MarginInlineEnd) - var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-section--PaddingInlineEnd)); - max-width: calc(100vw - var(--pf-v6-c-page__sidebar--Width) - var(--pf-v6-c-page__main-container--MarginInlineEnd) - var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-section--PaddingInlineEnd)); + width: calc( + 100vw - + var(--pf-v6-c-page__sidebar--Width) - + var(--pf-v6-c-page__main-container--MarginInlineEnd) - + var(--pf-v6-c-page__main-section--PaddingInlineStart) - + var(--pf-v6-c-page__main-section--PaddingInlineEnd) + ); + max-width: calc( + 100vw - + var(--pf-v6-c-page__sidebar--Width) - + var(--pf-v6-c-page__main-container--MarginInlineEnd) - + var(--pf-v6-c-page__main-section--PaddingInlineStart) - + var(--pf-v6-c-page__main-section--PaddingInlineEnd) + ); } }