@deriv-web-design/ui 0.1.37 → 0.1.38

package/dist/index.css

@@ -11266,7 +11266,8 @@
 }
 .tchow-stripWrap {
   width: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: visible;
 }
 .tchow-strip {
   display: inline-grid;
@@ -11297,41 +11298,45 @@
   text-align: center;
 }
 .tchow-stripValueText--labeled {
-  min-width: 4rem;
+  min-width: 4.5rem;
 }
 .tchow-stripCaption {
+  justify-self: center;
   align-self: start;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-4);
-  min-height: 1px;
+  min-width: 0;
+}
+.tchow-stripCaption--labeled {
+  box-sizing: border-box;
+  width: 5.5rem;
+  max-width: 5.5rem;
 }
 .tchow-stripArrow {
   color: var(--color-slate-500);
   flex-shrink: 0;
 }
 .tchow-stripLabel {
-  position: relative;
-  width: 0;
-  overflow: visible;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  text-align: center;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.25;
   font-family: var(--font-family-base);
   font-size: var(--typography-body-xs-font-size);
   color: var(--text-secondary);
-  white-space: nowrap;
 }
 .tchow-stripLabelText {
-  position: absolute;
-  left: 0;
-  transform: translateX(-50%);
-}
-.tchow-stripLabel--edge {
-  width: auto;
-  text-align: center;
-}
-.tchow-stripLabel--edge .tchow-stripLabelText {
-  position: static;
-  transform: none;
+  display: block;
+  width: 100%;
+  min-width: 0;
 }
 
 /* templates/CryptoTradeConverter/CryptoTradeConverter.css */