Merge branch 'frontend-settings-values'

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

@@ -1,5 +1,5 @@
 .container {
-    height: var(--item-height-xlarge);
+    min-height: var(--item-height-xlarge);
     width: 100%;
     min-width: 230px;
     display: flex;
@@ -56,11 +56,15 @@
     text-overflow: ellipsis;
 }
 
+.nowrap {
+    white-space: nowrap;
+}
+
 @media (max-width: 768px) {
     .container {
-         height: auto;
-         margin-bottom: 5px;
-         min-width: 100%;
+        min-height: auto;
+        margin-bottom: 5px;
+        min-width: 100%;
     }
 
     .secondaryText {

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