3 files changed, 29 insertions, 11 deletions
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 87d1d1440d..87bf91123b 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -33,6 +33,7 @@ import AppRouter from './components/AppRouter';
 import { Changelog } from './components/Changelog';
 import ErrorBoundary from './components/ErrorBoundary';
 import KeyboardNavigation from './components/KeyboardNavigation';
+import Lang from './components/Lang';
 import MacOsScrollbarDetection from './components/MacOsScrollbarDetection';
 import { ModalContainer } from './components/Modal';
 import { AppContext } from './context';
@@ -264,17 +265,19 @@ export default class AppRenderer {
     return (
       <AppContext.Provider value={{ app: this }}>
         <Provider store={this.reduxStore}>
-          <Router history={this.history.asHistory}>
-            <ErrorBoundary>
-              <ModalContainer>
-                <KeyboardNavigation>
-                  <AppRouter />
-                  <Changelog />
-                </KeyboardNavigation>
-                {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
-              </ModalContainer>
-            </ErrorBoundary>
-          </Router>
+          <Lang>
+            <Router history={this.history.asHistory}>
+              <ErrorBoundary>
+                <ModalContainer>
+                  <KeyboardNavigation>
+                    <AppRouter />
+                    <Changelog />
+                  </KeyboardNavigation>
+                  {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
+                </ModalContainer>
+              </ErrorBoundary>
+            </Router>
+          </Lang>
         </Provider>
       </AppContext.Provider>
     );
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,