frontend: fix breaking settings words

A long settings description can break the short settings value to
2 lines.

Example: Root fingerprint has very long description and breaks the
actual value (the fingerprint on the right) onto 2 lines.

Introduced a new SettingsValue component that by default does not
break onto multiple lines.

Author: thisconnect

frontends/web/src/routes/settings/components/device-settings/root-fingerprint-setting.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { SettingsItem } from '../settingsItem/settingsItem';
+import { SettingsItem, SettingsValue } from '../settingsItem/settingsItem';
 
 type TProps = {
     rootFingerprint: string;
@@ -27,7 +27,9 @@ const RootFingerprintSetting = ({ rootFingerprint }: TProps) => {
     <SettingsItem
       settingName={'Root fingerprint'}
       secondaryText={t('deviceSettings.deviceInformation.rootFingerprint.description')}
-      displayedValue={rootFingerprint}
+      displayedValue={
+        <SettingsValue>{rootFingerprint}</SettingsValue>
+      }
     />
   );
 };

frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css

@@ -56,6 +56,10 @@
     text-overflow: ellipsis;
 }
 
+.nowrap {
+    white-space: nowrap;
+}
+
 @media (max-width: 768px) {
     .container {
          height: auto;

frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx

@@ -20,7 +20,7 @@ import styles from './settingsItem.module.css';
 type TProps = {
   className?: string
   collapseOnSmall?: boolean;
-  displayedValue?: string;
+  displayedValue?: string | ReactNode;
   extraComponent?: ReactNode;
   hideDisplayedValueOnSmall?: boolean;
   onClick?: () => void;
@@ -84,3 +84,18 @@ export const SettingsItem = ({
     </>
   );
 };
+
+type TSettingsValueProps = {
+  children: ReactNode;
+  wrap?: boolean;
+}
+
+export const SettingsValue = ({
+  children,
+  wrap,
+}: TSettingsValueProps) => {
+  const classNames = wrap ? '' : styles.nowrap;
+  return (
+    <span className={classNames}>{children}</span>
+  );
+};