Merge pull request #3153 from pyth-network/bduran/insights-hub-mobile-overflow

fix(insights-hub): fixed price feed description and price getting pushed off screen on mobile devices

Author: benduran

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;
     }
 

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;
+      }
     }
   }