chore: optimize settings layout

src/components/Inputs/SelectInput.tsx

@@ -33,6 +33,7 @@ export function SelectInput<T>({
             },
           },
         },
+        mb: 1
       }}
     >
       <FormControl.Label>{label}</FormControl.Label>

src/components/settings/SettingsBar.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@primer/react'
 import { Icon } from 'components/Icon'
 import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
@@ -56,7 +57,7 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           <Icon type={'chevron-down'} className={'hide-settings-icon'} />
         </button>
       </div>
-      <div className={'gitako-settings-bar-content'}>
+      <Box display="grid" gridGap={4} className={'gitako-settings-bar-content'}>
         <div className={'shadow-shelter'} />
         <AccessTokenSettings />
         <SidebarSettings />
@@ -73,23 +74,25 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           </SettingsSection>
         )}
         <SettingsSection title={'Talk to the author'}>
-          <a
-            href="https://github.com/EnixCoda/Gitako/issues"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Report bug
-          </a>
-          {' / '}
-          <a
-            href="https://github.com/EnixCoda/Gitako/discussions"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Discuss feature
-          </a>
+          <div>
+            <a
+              href="https://github.com/EnixCoda/Gitako/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Report bug
+            </a>
+            {' / '}
+            <a
+              href="https://github.com/EnixCoda/Gitako/discussions"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Discuss feature
+            </a>
+          </div>
         </SettingsSection>
-      </div>
+      </Box>
     </div>
   )
 }

src/components/settings/SettingsSection.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@primer/react'
 import * as React from 'react'
 type Props = {
   title?: React.ReactNode
@@ -5,9 +6,9 @@ type Props = {
 
 export function SettingsSection({ title, children }: React.PropsWithChildren<Props>) {
   return (
-    <div className={'settings-section'}>
+    <Box display="grid" gridGap={'2px'} className={'settings-section'}>
       {title && <h3>{title}</h3>}
       {children}
-    </div>
+    </Box>
   )
 }

src/styles/index.scss

@@ -852,11 +852,6 @@ $minimal-z-index: max(
           background: var(--color-bg-subtle);
           z-index: 2;
         }
-        .settings-section {
-          &:not(:last-of-type) {
-            margin-bottom: 30px;
-          }
-        }
       }
       .link-button {
         cursor: pointer;