modal spacing fixes

components/item-act.js

@@ -15,10 +15,10 @@ const defaultTips = [100, 1000, 10000, 100000]
 
 const Tips = ({ setOValue }) => {
   const tips = [...getCustomTips(), ...defaultTips].sort((a, b) => a - b)
-  return tips.map(num =>
+  return tips.map((num, i) =>
     <Button
       size='sm'
-      className={`${num > 1 ? 'ms-2' : ''} mb-2`}
+      className={`${i > 0 ? 'ms-2' : ''} mb-2`}
       key={num}
       onClick={() => { setOValue(num) }}
     >
@@ -183,7 +183,7 @@ export default function ItemAct ({ onClose, itemId, down, children }) {
         <Tips setOValue={setOValue} />
       </div>
       {children}
-      <div className='d-flex'>
+      <div className='d-flex mt-3'>
         <SubmitButton variant={down ? 'danger' : 'success'} className='ms-auto mt-1 px-4' value='TIP'>{down && 'down'}zap</SubmitButton>
       </div>
     </Form>

pages/settings/index.js

@@ -962,7 +962,7 @@ function ApiKeyDeleteObstacle ({ onClose }) {
   const toaster = useToast()
 
   return (
-    <div className='text-center'>
+    <div className='m-auto' style={{ maxWidth: 'fit-content' }}>
       <p className='fw-bold'>
         Do you really want to delete your API key?
       </p>

styles/globals.scss

@@ -492,10 +492,7 @@ div[contenteditable]:disabled,
   background-color: var(--theme-inputBg);
   border-color: var(--theme-borderColor);
 }
-.modal-body {
-  align-self: center;
-  width: fit-content;
-}
+
 .modal-body:has(video) {
   width: 100%;
 }