diff --git a/packages/component-library/src/EntityList/index.module.scss b/packages/component-library/src/EntityList/index.module.scss index 4e832207a4..c2c687e760 100644 --- a/packages/component-library/src/EntityList/index.module.scss +++ b/packages/component-library/src/EntityList/index.module.scss @@ -52,9 +52,10 @@ .itemHeader, .itemDetailsItem { + align-items: center; display: flex; flex-flow: row nowrap; - align-items: center; + gap: theme.spacing(2); // give items a little breathing room if text is long justify-content: space-between; } diff --git a/packages/component-library/src/SymbolPairTag/index.module.scss b/packages/component-library/src/SymbolPairTag/index.module.scss index 5e08030b7c..42d44e8cf4 100644 --- a/packages/component-library/src/SymbolPairTag/index.module.scss +++ b/packages/component-library/src/SymbolPairTag/index.module.scss @@ -50,10 +50,21 @@ .description { color: theme.color("muted"); - overflow: hidden; - text-overflow: ellipsis; - + // this helps prevent long feed descriptions from looking gross + // and overflowing off the page, pushing the curren values off the page, + // too + overflow: initial; + text-overflow: initial; + white-space: normal; + @include theme.text("xs", "medium"); + + // reset the above on large devices, to match when the price feeds grid switches over + @include theme.breakpoint("2xl") { + overflow: hidden; + text-overflow: ellipsis; + white-space: unset; + } } }