From 02cdd13bf76f97f04b4c3826b56769e36c17a2d7 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Wed, 7 Feb 2024 22:31:21 +0700
Subject: [PATCH] improve sheets

---
 src/LastCommandsSheet.jsx   | 2 +-
 src/components/Settings.jsx | 4 ++--
 src/components/Sheet.jsx    | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/LastCommandsSheet.jsx b/src/LastCommandsSheet.jsx
index f8b1cfeb..dac8df01 100644
--- a/src/LastCommandsSheet.jsx
+++ b/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 ? (
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 336ae72a..dec1bdb1 100644
--- a/src/components/Settings.jsx
+++ b/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>
diff --git a/src/components/Sheet.jsx b/src/components/Sheet.jsx
index da722d52..01f8a3a1 100644
--- a/src/components/Sheet.jsx
+++ b/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>