feat(options/sync): improve timeout layout

apps/client/src/translations/en/translation.json

@@ -1519,6 +1519,7 @@
     "config_title": "Sync Configuration",
     "server_address": "Server instance address",
     "timeout": "Sync timeout",
+    "timeout_description": "How long to wait before giving up on a slow sync connection. Increase if you have an unstable network.",
     "proxy_label": "Sync proxy server (optional)",
     "note": "Note",
     "note_description": "If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only).",

apps/client/src/widgets/type_widgets/options/sync.tsx

@@ -11,6 +11,7 @@ import FormText from "../../react/FormText";
 import FormTextBox from "../../react/FormTextBox";
 import { useTriliumOptions } from "../../react/hooks";
 import RawHtml from "../../react/RawHtml";
+import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import TimeSelector from "./components/TimeSelector";
 
@@ -62,14 +63,16 @@ export function SyncConfiguration() {
                 </div>
             </form>
 
-            <FormGroup name="sync-server-timeout" label={t("sync_2.timeout")}>
+            <hr/>
+
+            <OptionsRow name="sync-server-timeout" label={t("sync_2.timeout")} description={t("sync_2.timeout_description")}>
                 <TimeSelector
                     name="sync-server-timeout"
                     optionValueId="syncServerTimeout"
                     optionTimeScaleId="syncServerTimeoutTimeScale"
                     minimumSeconds={1}
                 />
-            </FormGroup>
+            </OptionsRow>
         </OptionsSection>
     );
 }