Merge pull request #3998 from Emurgo/fix/YOEXT-1969

fix: gobal horizontall scrollbar style

Author: vsubhuman

packages/yoroi-extension/app/UI/features/transaction-review/useCases/ReviewTx/Metadata/MetadataTab.tsx

@@ -28,12 +28,21 @@ export const MetadataTab = ({ hash, metadata }) => {
           sx={{
             overflow: 'auto',
             whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
+            wordBreak: 'break-all',
             padding: '8px',
             borderRadius: '4px',
+            maxWidth: '100%',
           }}
         >
-          <Typography variant="body1" component="pre">
+          <Typography
+            variant="body1"
+            component="pre"
+            sx={{
+              margin: 0,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+            }}
+          >
             {metadata ? JSON.stringify(metadata, null, 2) : strings.missingMetadata}
           </Typography>
         </Box>

packages/yoroi-extension/app/styles/globalStyles.js

@@ -290,12 +290,12 @@ export function getMainYoroiPalette(theme: ColorPaletteForStyles): { [string]: s
           '--toastify-color-warning': '#f1c40f',
           '--toastify-color-error': 'hsl(6, 78%, 57%)',
           '--toastify-color-transparent': 'rgba(255, 255, 255, 0.7)',
-      
+
           '--toastify-icon-color-info': 'var(--toastify-color-info)',
           '--toastify-icon-color-success': 'var(--toastify-color-success)',
           '--toastify-icon-color-warning': 'var(--toastify-color-warning)',
           '--toastify-icon-color-error': 'var(--toastify-color-error)',
-      
+
           '--toastify-container-width': 'fit-content',
           '--toastify-toast-width': '446px',
           '--toastify-toast-offset': '16px',
@@ -313,13 +313,13 @@ export function getMainYoroiPalette(theme: ColorPaletteForStyles): { [string]: s
           '--toastify-z-index': '9999',
           '--toastify-text-color-light': '#757575',
           '--toastify-text-color-dark': '#fff',
-      
+
           /* Used only for colored theme */
           '--toastify-text-color-info': '#fff',
           '--toastify-text-color-success': '#fff',
           '--toastify-text-color-warning': '#fff',
           '--toastify-text-color-error': '#fff',
-      
+
           '--toastify-spinner-color': '#616161',
           '--toastify-spinner-color-empty-area': '#e0e0e0',
           '--toastify-color-progress-light': 'linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)',
@@ -387,6 +387,7 @@ const globalStyles = (theme: Object): Node => {
           boxSizing: 'border-box',
           '&::-webkit-scrollbar': {
             width: '20px',
+            height: '20px',
           },
           '&::-webkit-scrollbar-track': {
             backgroundColor: 'transparent',