feat(ui): polish advanced settings, media hosting warning, reply modal mobile UX (#1054)

- Move Save Advanced Settings button to bottom-center of advanced settings
- Reduce spacing above/below web upload warning in media hosting
- Set 16px font for reply modal inputs on mobile (prevents iOS zoom)
- Autofocus textarea when opening reply modal on mobile

src/components/settings-modal/advanced-settings/advanced-settings.module.css

@@ -48,9 +48,8 @@
 }
 
 .saveOptions {
-  float: right;
-  margin-top: -27px;
-  margin-right: 10px;
+  display: block;
+  margin: 15px auto 15px;
   text-transform: capitalize;
 }
 

src/components/settings-modal/advanced-settings/advanced-settings.tsx

@@ -262,9 +262,6 @@ const AdvancedSettings = () => {
 
   return (
     <div className={styles.content}>
-      <button className={styles.saveOptions} onClick={handleSave}>
-        {t('save_options')}
-      </button>
       <div className={styles.category}>
         <span className={styles.categoryTitle}>IPFS gateways:</span>
         <span className={styles.categorySettings}>
@@ -305,6 +302,9 @@ const AdvancedSettings = () => {
           </span>
         </div>
       )}
+      <button className={styles.saveOptions} onClick={handleSave}>
+        {t('save_advanced_settings')}
+      </button>
     </div>
   );
 };

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -53,7 +53,7 @@
 
 .webUploadWarning {
   font-size: 0.8em;
-  padding: 5px 0;
+  padding: 2px 0;
   margin-left: 10px;
 }