settings: pull backbutton out of col gaps

pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx

@@ -78,9 +78,9 @@ export function CalmPrefs(props: {
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
+        <BackButton/>
         <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
-          <BackButton/>
-          <Col gapY="1">
+            <Col gapY="1" mt="0">
             <Text color="black" fontSize={2} fontWeight="medium">
               CalmEngine
             </Text>

pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx

@@ -94,9 +94,9 @@ export default function DisplayForm(props: DisplayFormProps) {
     >
       {(props) => (
         <Form>
+          <BackButton/>
           <Col p="5" pt="4" gapY="5">
-            <BackButton/>
-            <Col gapY="2">
+              <Col gapY="1" mt="0">
               <Text color="black" fontSize={2} fontWeight="medium">
                 Display Preferences
               </Text>

pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx

@@ -74,9 +74,10 @@ export function LeapSettings(props: { api: GlobalApi; }) {
   };
 
   return (
+    <>
+    <BackButton/>
     <Col p="5" pt="4" gapY="5">
-      <BackButton/>
-      <Col gapY="1">
+      <Col gapY="1" mt="0">
         <Text fontSize="2" fontWeight="medium">
           Leap
         </Text>
@@ -97,5 +98,6 @@ export function LeapSettings(props: { api: GlobalApi; }) {
         </Form>
       </FormikOnBlur>
     </Col>
+    </>
   );
 }

pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx

@@ -51,9 +51,10 @@ export function NotificationPreferences(props: {
   }, [api]);
 
   return (
+    <>
+    <BackButton/>
     <Col p="5" pt="4" gapY="5">
-      <BackButton/>
-      <Col gapY="1">
+      <Col gapY="1" mt="0">
         <Text fontSize="2" fontWeight="medium">
           Notification Preferences
         </Text>
@@ -84,5 +85,6 @@ export function NotificationPreferences(props: {
         </Form>
       </FormikOnBlur>
     </Col>
+    </>
   );
 }

pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx

@@ -64,9 +64,9 @@ export default function S3Form(props: S3FormProps): ReactElement {
           onSubmit={onSubmit}
         >
           <Form>
+            <BackButton/>
             <Col maxWidth="600px" gapY="5">
-              <BackButton/>
-              <Col gapY="1">
+              <Col gapY="1" mt="0">
                 <Text color="black" fontSize={2} fontWeight="medium">
                   S3 Storage Setup
                 </Text>

pkg/interface/src/views/apps/settings/components/lib/Security.tsx

@@ -17,9 +17,10 @@ interface SecuritySettingsProps {
 export default function SecuritySettings({ api }: SecuritySettingsProps) {
   const [allSessions, setAllSessions] = useState(false);
   return (
+    <>
+    <BackButton/>
     <Col gapY="5" p="5" pt="4">
-      <BackButton/>
-      <Col gapY="1">
+      <Col gapY="1" mt="0">
         <Text fontSize={2} fontWeight="medium">
           Security Preferences
         </Text>
@@ -56,5 +57,6 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
         </form>
       </Col>
     </Col>
+    </>
   );
 }

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx

@@ -161,7 +161,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
     >
       <Form style={{ display: 'contents' }}>
         <Col mt="4" flexShrink={0} gapY="5">
-          <Col gapY="1">
+          <Col gapY="1" mt="0">
             <Text id="permissions" fontWeight="bold" fontSize="2">
               Permissions
             </Text>