Separate bodyContainer from bodyFile, avoid dropdown clipping (fix #627)

edemaine · Sep 14, 2023 · 27d1676 · 27d1676
1 parent 193c3ed
commit 27d1676
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ To see every change with descriptions aimed at developers, see
 As a continuously updated web app, Coauthor uses dates
 instead of version numbers.
 
+## 2023-09-14
+
+* Fix clipping of Rotate and File dropdowns which made them nonfunctional
+  [[#627](https://github.com/edemaine/coauthor/issues/627)]
+
 ## 2023-09-13
 
 * Fix excess horizontal scrollbars in messages, especially with display math

diff --git a/client/message.coffee b/client/message.coffee
@@ -2786,6 +2786,7 @@ 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}
@@ -2796,22 +2797,24 @@ export WrappedSubmessage = React.memo ({message, read}) ->
               <div className="panel-body">
                 <div className="message-body" ref={messageBodyRef}
                  dangerouslySetInnerHTML={__html: formattedBody}/>
-                {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>
-          }
+            <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}/>

diff --git a/client/message.styl b/client/message.styl
@@ -185,6 +185,8 @@ bootstrap-3-button(bg-color) // based on mixins/buttons.less
 
 // MessageFileDescription
 
+.bodyFile
+  padding-inline: 15px
 .fileDescription
   display: flex
   flex-direction: row