Improve focal point modal on mobile (#11575)

* Reduce padding around report modal and focal point modal title

* Increase max allowed height for focal point modal content

diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js
index 67c5606200baa0684d2c168a0b3c46914dc56889..e0ef1a066a98ff2ee32763a0faa458b0ec46336d 100644 (file)
--- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js
+++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js
@@ -228,7 +228,7 @@ class FocalPointModal extends ImmutablePureComponent {
             <Button disabled={!dirty || detecting || length(description) > 420} text={intl.formatMessage(messages.apply)} onClick={this.handleSubmit} />
           </div>
 
-          <div className='report-modal__statuses'>
+          <div className='focal-point-modal__content'>
             {focals && (
               <div className={classNames('focal-point', { dragging })} ref={this.setRef} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
                 {media.get('type') === 'image' && <img src={media.get('url')} width={width} height={height} alt='' />}

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 78ce5d46c813712d4f0254a0cc8aba72886b4d5f..6264c3df8111272f2767c834e33552d765612f5f 100644 (file)
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4534,7 +4534,8 @@ a.status-card.compact:hover {
   }
 }
 
-.report-modal__statuses {
+.report-modal__statuses,
+.focal-point-modal__content {
   flex: 1 1 auto;
   min-height: 20vh;
   max-height: 80vh;
@@ -4555,6 +4556,12 @@ a.status-card.compact:hover {
   }
 }
 
+.focal-point-modal__content {
+  @media screen and (max-width: 480px) {
+    max-height: 40vh;
+  }
+}
+
 .report-modal__comment {
   padding: 20px;
   border-right: 1px solid $ui-secondary-color;
@@ -4749,10 +4756,10 @@ a.status-card.compact:hover {
 }
 
 .report-modal__target {
-  padding: 20px;
+  padding: 15px;
 
   .media-modal__close {
-    top: 19px;
+    top: 14px;
     right: 15px;
   }
 }