Merge branch 'add-word-break-hyphen'

2 files changed, 15 insertions, 0 deletions

diff --git a/gui/src/renderer/components/Lang.tsx b/gui/src/renderer/components/Lang.tsx
new file mode 100644
index 0000000000..2145e12fbb
--- /dev/null
+++ b/gui/src/renderer/components/Lang.tsx
@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+import { useSelector } from '../redux/store';
+
+const StyledLang = styled.div({
+  display: 'flex',
+  flex: '1',
+});
+
+export default function Lang(props: PropsWithChildren) {
+  const locale = useSelector((state) => state.userInterface.locale);
+  return <StyledLang lang={locale}>{props.children}</StyledLang>;
+}
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index a929d8ba83..8724ea93d9 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -20,6 +20,7 @@ export const ContentWrapper = styled.div({
 
 export const HeaderTitle = styled.span(hugeText, {
   wordWrap: 'break-word',
+  hyphens: 'auto',
 });
 export const HeaderSubTitle = styled.span(tinyText, {
   color: colors.white60,