fix(ios): sometimes switches were not aligned correctly

Author: farfromrefug

app/components/settings/FolderImageSyncSettings.svelte

@@ -329,7 +329,7 @@
  </Template>
  <Template key="switch" let:item>
  <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
- <switch id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckBox(item, e)} />
+ <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
  </ListItemAutoSize>
  </Template>
  <Template let:item>

app/components/settings/FolderPDFSyncSettings.svelte

@@ -346,7 +346,7 @@
  </Template>
  <Template key="switch" let:item>
  <ListItemAutoSize leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
- <switch id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckBox(item, e)} />
+ <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
  </ListItemAutoSize>
  </Template>
  <Template key="pdfoptions" let:item>

app/components/settings/Settings.svelte

@@ -103,6 +103,7 @@
  const dataSettingsAvailable = __ANDROID__ && android.os.Environment.getExternalStorageState() === 'mounted';
 
  export let title = null;
+ export let id = 'settingsPage';
  export let actionBarButtons = [
  { icon: 'mdi-message-alert', id: 'feedback' },
  { icon: 'mdi-share-variant', id: 'share' },
@@ -963,6 +964,7 @@
  case 'sub_settings': {
  showSettings({
  title: item.title,
+ id: `settings[${item.id}]`,
  options: item.options(),
  actionBarButtons: item.actionBarButtons?.() || []
  });
@@ -1464,7 +1466,7 @@
  onThemeChanged(refreshCollectionView);
 </script>
 
-<page bind:this={page} id="syncSettingsPage" actionBarHidden={true}>
+<page bind:this={page} {id} actionBarHidden={true}>
  <gridlayout class="pageContent" rows="auto,*">
  <collectionview bind:this={collectionView} accessibilityValue="settingsCV" itemTemplateSelector={selectTemplate} {items} row={1} android:paddingBottom={$windowInset.bottom}>
  <Template key="header" let:item>
@@ -1515,7 +1517,7 @@
  </Template>
  <Template key="switch" let:item>
  <ListItemAutoSize subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
- <switch id="checkbox" checked={item.value} col={1} marginLeft={10} marginTop={16} verticalAlignment="top" on:checkedChange={(e) => onCheckBox(item, e)} />
+ <switch id="checkbox" checked={item.value} col={1} marginLeft={10} marginTop={16} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
  </ListItemAutoSize>
  </Template>
  <Template key="checkbox" let:item>

app/components/settings/SyncListSettings.svelte

@@ -341,7 +341,7 @@
  }
 </script>
 
-<page id="settingsPage" actionBarHidden={true}>
+<page id="syncSettingsPage" actionBarHidden={true}>
  <gridlayout class="pageContent" rows="auto,*">
  <collectionview bind:this={collectionView} itemTemplateSelector={selectTemplate} {items} row={1} android:paddingBottom={$windowInset.bottom}>
  <Template let:item>

app/components/settings/WebdavDataSyncSettings.svelte

@@ -86,6 +86,7 @@
  checked={$store.enabled}
  col={1}
  marginLeft={10}
+ verticalAlignment="center"
  on:checkedChange={(e) =>
  onCheckBox(e, (e) => {
  $store.enabled = e.value;

app/components/settings/WebdavImageSyncSettings.svelte

@@ -359,7 +359,7 @@
  </Template>
  <Template key="switch" let:item>
  <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
- <switch id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckBox(item, e)} />
+ <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
  </ListItemAutoSize>
  </Template>
  <Template let:item>

app/components/settings/WebdavPDFSyncSettings.svelte

@@ -357,7 +357,7 @@
  </Template>
  <Template key="switch" let:item>
  <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
- <switch id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckBox(item, e)} />
+ <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
  </ListItemAutoSize>
  </Template>
  <Template let:item>