From 3f2fdd2811681da7d74a628168e6a4b0a7d28061 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 18 Mar 2024 16:14:10 +0100
Subject: [PATCH 1/2] 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.
---
 .../root-fingerprint-setting.tsx                |  6 ++++--
 .../settingsItem/settingsItem.module.css        |  4 ++++
 .../components/settingsItem/settingsItem.tsx    | 17 ++++++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontends/web/src/routes/settings/components/device-settings/root-fingerprint-setting.tsx b/frontends/web/src/routes/settings/components/device-settings/root-fingerprint-setting.tsx
index 14f4c0d51c..d82c80a576 100644
--- a/frontends/web/src/routes/settings/components/device-settings/root-fingerprint-setting.tsx
+++ b/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>
+      }
     />
   );
 };
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
index 142c2767b1..caaca2c7a3 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
+++ b/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;
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
index c4d4e9316c..1df71c7dea 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
+++ b/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>
+  );
+};

From 6bc7de081b3d4e0b40b1433a1a70c33855d27508 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 18 Mar 2024 16:16:50 +0100
Subject: [PATCH 2/2] frontend: allow settings item layout to expand

If there is a lot of content settings item height should adjust to
the content, example 'Root fingerprint' on medium and large screen
where there is a long description.
---
 .../components/settingsItem/settingsItem.module.css       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
index caaca2c7a3..ae3b0d49eb 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
+++ b/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;
@@ -62,9 +62,9 @@
 
 @media (max-width: 768px) {
     .container {
-         height: auto;
-         margin-bottom: 5px;
-         min-width: 100%;
+        min-height: auto;
+        margin-bottom: 5px;
+        min-width: 100%;
     }
 
     .secondaryText {