Move image and above-image description to after preview (fix #627)

edemaine · Jan 15, 2025 · ff9bef2 · ff9bef2
1 parent 661cfc9
commit ff9bef2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@ instead of version numbers.
 ## 2025-01-15
 
 * Prevent repeating password in full-name field when signing up for account
+* Fix clipping of Rotate and File dropdowns above image
+  [[#627](https://github.com/edemaine/coauthor/issues/627)]
+  by moving them after description preview
+  (also improving side-by-side preview)
 
 ## 2024-08-12
 

diff --git a/client/message.coffee b/client/message.coffee
@@ -2839,39 +2839,38 @@ export WrappedSubmessage = React.memo ({message, read}) ->
             }
           </div>
           {if preview.on
-          <>
             <div className="bodyContainer" style={{height: if previewSideBySide then preview.height else 'auto'}}>
-              {if historified.file and editing
-                <MessageFileDescription message={message} history={history}
-                 messageFileType={messageFileType}
-                 description={formattedFile.description}
-                 menu={can.edit} tabindex={tabindex0+9}/>
-              }
               <div className="panel-body">
                 <div className="message-body" ref={messageBodyRef}
                  dangerouslySetInnerHTML={__html: formattedBody}/>
               </div>
             </div>
-            <div className="bodyFile">
-              {if messageFileType == 'pdf'
-                <MessagePDF file={historified.file}/>
-              }
-              {if historified.file
-                <>
-                  <div className="message-file" ref={messageFileRef}
-                    dangerouslySetInnerHTML={__html: formattedFile.file}/>
-                  <MessageFileDescription message={message} history={history}
-                    messageFileType={messageFileType}
-                    description={formattedFile.description}
-                    menu={can.edit} tabindex={tabindex0+9}/>
-                </>
-              }
-            </div>
-          </>}
+          }
         </div>
         {if previewSideBySide
           <BelowEditor message={message} preview={preview} safeToStopEditing={safeToStopEditing} editStopping={editStopping}/>
         }
+        {if historified.file and editing
+          <MessageFileDescription message={message} history={history}
+            messageFileType={messageFileType}
+            description={formattedFile.description}
+            menu={can.edit} tabindex={tabindex0+9}/>
+        }
+        <div className="bodyFile">
+          {if messageFileType == 'pdf'
+            <MessagePDF file={historified.file}/>
+          }
+          {if historified.file
+            <>
+              <div className="message-file" ref={messageFileRef}
+                dangerouslySetInnerHTML={__html: formattedFile.file}/>
+              <MessageFileDescription message={message} history={history}
+                messageFileType={messageFileType}
+                description={formattedFile.description}
+                menu={can.edit} tabindex={tabindex0+9}/>
+            </>
+          }
+        </div>
         <div className="message-footer">
           <MessageAuthor message={historified} also={history?}/>
           <div className="message-response-buttons clearfix hidden-print">

diff --git a/client/message.styl b/client/message.styl
@@ -194,9 +194,11 @@ bootstrap-3-button(bg-color) // based on mixins/buttons.less
   justify-content: space-between
   align-items: center
   padding-block: 0.5ex
-.bodyContainer > .fileDescription:first-child
+.editorAndBody + .fileDescription
+  border-top: 1px solid #337ab7
+.editorAndBody + .fileDescription, .resizer + .fileDescription
   padding-inline: 15px
-  border-bottom: 1px solid #337ab7
+  padding-top: 0.5em
 .fileDescriptionText
   flex-grow: 1
 .file-right-buttons