:electron: Fix electron "Data Dir" picker on Settings page (#3133)

* fix electron file location picker

* add release notes

* update message and style

packages/desktop-client/src/components/settings/Global.tsx

@@ -34,36 +34,40 @@ export function GlobalSettings() {
   return (
     <Setting
       primaryAction={
-        <View style={{ flexDirection: 'row' }}>
-          <Button onPress={onChooseDocumentDir}>Change location</Button>
+        <>
+          <View style={{ flexDirection: 'row', gap: '0.5rem', width: '100%' }}>
+            <Text
+              innerRef={dirScrolled}
+              title={documentDir}
+              style={{
+                backgroundColor: theme.pageBackground,
+                padding: '7px 10px',
+                borderRadius: 4,
+                overflow: 'auto',
+                whiteSpace: 'nowrap',
+                width: '100%',
+                '::-webkit-scrollbar': { display: 'none' }, // Removes the scrollbar
+              }}
+            >
+              {documentDir}
+            </Text>
+            <Button onPress={onChooseDocumentDir}>Change location</Button>
+          </View>
+
           {documentDirChanged && (
             <Information>
-              A restart is required for this change to take effect
+              <strong>Remember</strong> to copy your budget(s) into the new
+              folder. <br />A restart is required for this change to take
+              effect.
             </Information>
           )}
-        </View>
+        </>
       }
     >
       <Text>
         <strong>Actual’s files</strong> are stored in a folder on your computer.
         Currently, that’s:
       </Text>
-      <Text
-        innerRef={dirScrolled}
-        style={{
-          backgroundColor: theme.pageBackground,
-          padding: '7px 10px',
-          borderRadius: 4,
-          overflow: 'auto',
-          whiteSpace: 'nowrap',
-          // TODO: When we update electron, we should be able to
-          // remove this. In previous versions of Chrome, once the
-          // scrollbar appears it never goes away
-          '::-webkit-scrollbar': { display: 'none' },
-        }}
-      >
-        {documentDir}
-      </Text>
     </Setting>
   );
 }

packages/desktop-client/src/components/settings/index.tsx

@@ -2,8 +2,8 @@ import React, { type ReactNode, useEffect } from 'react';
 
 import { media } from 'glamor';
 
-import * as Platform from 'loot-core/src/client/platform';
 import { listen } from 'loot-core/src/platform/client/fetch';
+import { isElectron } from 'loot-core/src/shared/environment';
 
 import { useActions } from '../../hooks/useActions';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
@@ -172,17 +172,13 @@ export function Settings() {
             <Button onPress={closeBudget}>Close Budget</Button>
           </View>
         )}
-
         <About />
-
-        {!Platform.isBrowser && <GlobalSettings />}
-
+        {isElectron() && <GlobalSettings />}
         <ThemeSettings />
         <FormatSettings />
         <EncryptionSettings />
         {useFeatureFlag('reportBudget') && <BudgetTypeSettings />}
         <ExportBudget />
-
         <AdvancedToggle>
           <AdvancedAbout />
           <ResetCache />

upcoming-release-notes/3133.md

+---
+category: Bugfix
+authors: [MikesGlitch]
+---
+
+Fix the Data Dir Location picker not showing on the Settings page when running in Electron.