improve sheets

src/LastCommandsSheet.jsx

@@ -8,7 +8,7 @@ const LastCommandsSheet = memo(({ visible, onTogglePress, ffmpegCommandLog }) =>
   const { t } = useTranslation();
 
   return (
-    <Sheet visible={visible} onClosePress={onTogglePress}>
+    <Sheet visible={visible} onClosePress={onTogglePress} style={{ padding: '0 1em' }}>
       <h2>{t('Last ffmpeg commands')}</h2>
 
       {ffmpegCommandLog.length > 0 ? (

src/components/Settings.jsx

@@ -78,11 +78,11 @@ const Settings = memo(({
 
   return (
     <>
-      <div style={{ margin: '0 2em' }}>
+      <div style={{ padding: '1.5em 2em' }}>
         <div>{t('Hover mouse over buttons in the main interface to see which function they have')}</div>
       </div>
 
-      <table style={{ marginTop: 20 }} className={styles.settings}>
+      <table className={styles.settings}>
         <thead>
           <tr className={styles.header}>
             <th>{t('Settings')}</th>

src/components/Sheet.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './Sheet.module.css';
 
-const Sheet = memo(({ visible, onClosePress, children, maxWidth = 800 }) => {
+const Sheet = memo(({ visible, onClosePress, children, maxWidth = 800, style }) => {
   const { t } = useTranslation();
 
   return (
@@ -17,8 +17,8 @@ const Sheet = memo(({ visible, onClosePress, children, maxWidth = 800 }) => {
           exit={{ scale: 0, opacity: 0 }}
           className={styles.sheet}
         >
-          <div style={{ margin: 'auto', maxWidth, height: '100%', position: 'relative', padding: '1em 0' }}>
-            <div style={{ overflowY: 'scroll', height: '100%' }}>
+          <div style={{ margin: 'auto', maxWidth, height: '100%', position: 'relative' }}>
+            <div style={{ overflowY: 'scroll', height: '100%', ...style }}>
               {children}
             </div>