fix: improve style of focal/alt editor on mobile (#1439)

fixes #1438

src/routes/_components/dialog/components/MediaAltEditor.html

@@ -1,4 +1,4 @@
-<div class="media-alt-editor">
+<div class="media-alt-editor {className}">
   <textarea
     id="the-media-alt-input-{realm}-{index}"
     class="media-alt-input"
@@ -44,7 +44,7 @@
   .media-alt-input {
     padding: 5px;
     border: 1px solid var(--input-border);
-    min-height: 75px;
+    min-height: 40px;
     resize: none;
     overflow: hidden;
     word-wrap: break-word;
@@ -74,12 +74,20 @@
     .media-alt-input {
       max-height: 40vh;
       width: 100%;
+      overflow: auto;
+    }
+    .extract-text-button {
+      margin-top: 0;
+    }
+    button.extract-text-button {
+      padding: 7px 10px;
     }
   }
 
   @media (min-height: 768px) {
     .media-alt-input {
       min-width: 250px;
+      min-height: 75px;
     }
   }
 </style>
@@ -115,7 +123,8 @@
     data: () => ({
       rawText: '',
       mediaAltCharLimit: MEDIA_ALT_CHAR_LIMIT,
-      extracting: false
+      extracting: false,
+      className: ''
     }),
     computed: {
       length: ({ rawText }) => length(rawText || ''),

src/routes/_components/dialog/components/MediaEditDialog.html

@@ -7,9 +7,10 @@
   on:show="measure()"
 >
   <div class="media-edit-dialog-container">
-    <div class="media-edit-header-and-item">
+    <div class="media-edit-header-and-item media-edit-header-and-item-alt">
       <h2>Description</h2>
       <MediaAltEditor
+        className="media-edit-item"
         {realm}
         {index}
         {media}
@@ -18,9 +19,10 @@
       />
     </div>
     {#if type === 'image'}
-      <div class="media-edit-header-and-item">
+      <div class="media-edit-header-and-item media-edit-header-and-item-focal">
         <h2>Preview (focal point)</h2>
         <MediaFocalPointEditor
+          className="media-edit-item"
           {realm}
           {index}
           {media}
@@ -54,12 +56,38 @@
   @media (max-width: 767px) {
     .media-edit-dialog-container {
       flex-direction: column;
-      overflow: auto;
+      overflow: hidden;
     }
 
     .media-edit-dialog-container {
       max-height: calc(100% - 25px); /* 25px X button height */
     }
+
+    .media-edit-header-and-item {
+      flex: 1;
+      min-height: 0;
+      padding: 5px 10px;
+    }
+    .media-edit-header-and-item {
+      display: flex;
+      flex-direction: column;
+    }
+
+    :global(.media-edit-item) {
+      flex: 1;
+      min-height: 0;
+    }
+    .media-edit-header-and-item-alt {
+      flex-basis: 40%;
+    }
+    .media-edit-header-and-item-focal {
+      flex-basis: 60%;
+    }
+
+    .media-edit-header-and-item h2 {
+      font-size: 1.2em;
+      margin-bottom: 5px;
+    }
   }
 
 </style>

src/routes/_components/dialog/components/MediaFocalPointEditor.html

@@ -1,4 +1,4 @@
-<form class="media-focal-point-container"
+<form class="media-focal-point-container {className}"
       aria-label="Enter the focal point (X, Y) for this media"
       on:resize="measure()"
 >
@@ -155,9 +155,21 @@
 
   @media (max-width: 767px) {
     .media-focal-point-inputs {
-      padding: 10px 20px;
+      padding: 5px 20px;
       justify-content: space-around;
     }
+    :global(.media-focal-point-indicator-svg) {
+      width: 32px;
+      height: 32px;
+      padding: 12px;
+      fill: var(--focal-color);
+    }
+    .media-focal-point-input-pair label {
+      font-size: 1.1em;
+    }
+    .media-focal-point-input-pair input {
+      font-size: 1.1em;
+    }
   }
 </style>
 <script>
@@ -197,7 +209,8 @@
       rawFocusY: '0',
       containerWidth: 0,
       containerHeight: 0,
-      imageLoaded: false
+      imageLoaded: false,
+      className: ''
     }),
     store: () => store,
     computed: {