feat: Preferences view layout on mobile has been updated, and can be dismissed by swiping from the right

packages/web/src/javascripts/Components/Preferences/Panes/General/Defaults.tsx

@@ -44,7 +44,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
         <Title>Defaults</Title>
         {application.platform === Platform.Android && (
           <>
-            <div className="flex items-center justify-between">
+            <div className="flex justify-between gap-2 md:items-center">
               <div className="flex flex-col">
                 <Subtitle>Always ask before closing app (Android)</Subtitle>
                 <Text>Whether a confirmation dialog should be shown before closing the app.</Text>
@@ -54,7 +54,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
             <HorizontalSeparator classes="my-4" />
           </>
         )}
-        <div className="flex items-center justify-between">
+        <div className="flex justify-between gap-2 md:items-center">
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>
             <Text>
@@ -65,7 +65,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
           <Switch onChange={toggleSpellcheck} checked={spellcheck} />
         </div>
         <HorizontalSeparator classes="my-4" />
-        <div className="flex items-center justify-between">
+        <div className="flex justify-between gap-2 md:items-center">
           <div className="flex flex-col">
             <Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
             <Text>When enabled, adding a nested tag to a note will automatically add all associated parent tags.</Text>

packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx

@@ -62,13 +62,14 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
   const premiumModal = usePremiumModal()
 
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  const canShowPaneGesturesOption = isMobileScreen && typeof isPaneGesturesEnabled === 'boolean'
 
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <Title>Labs</Title>
         <div>
-          {isMobileScreen && (
+          {canShowPaneGesturesOption && (
             <LabsFeature
               name="Pane switch gestures"
               description="Allows using gestures to navigate"
@@ -103,7 +104,7 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
               </Fragment>
             )
           })}
-          {(experimentalFeatures.length === 0 || typeof isPaneGesturesEnabled === 'boolean') && (
+          {experimentalFeatures.length === 0 && !canShowPaneGesturesOption && (
             <div className="flex items-center justify-between">
               <div className="flex flex-col">
                 <Text>No experimental features available.</Text>

packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/LabsFeature.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const LabsFeature = ({ name, description, toggleFeature, isEnabled }: Props) => {
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex justify-between gap-2 md:items-center">
       <div className="flex flex-col">
         <Subtitle>{name}</Subtitle>
         <Text>{description}</Text>

packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx

@@ -27,7 +27,7 @@ const Tools: FunctionComponent<Props> = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Tools</Title>
         <div>
-          <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-2 md:items-center">
             <div className="flex flex-col">
               <Subtitle>Show note saving status while editing</Subtitle>
               <Text>