TextCritical.net

I think the solution is to statically fix the position of the dialog in the top half or bottom half

• Where is the logic for positioning the dialog?
  • Popup
• How do I detect that I need to enter mobile mode?
• Where should the logic go for resizing it for mobile?
  • screen media query
• What is the style to make this work?
  

      top: 55px;
      left: 5px;
      width: calc(100% - 10px);
      position: fixed;
  
      top: 55px;
      left: 5px;
      width: calc(100% - 10px);
  

• What are the test cases?
  • Click on the top half
  • Click on the bottom half
  • Click word with a long definition
  • Click word with a short definition (like νυν in John 8)
    • Fails on mobile for short defs
• What is the difference between absolute and fixed?
  • I think I want to support both fixed (non-scrolling for mobile) and absolute (for desktops)
  • See https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  • The problem is that is needs to be within Sidebar.Pushable for the normal scrollable mechanism but needs to be outside of it in order to appear in a fixed position
• Can I inject the popup at the top level like modals do?
  **Yes: https://react.semantic-ui.com/addons/portal/#types-portal

• [Done] I need to set the z-index to put the popup over the paginators.
• This could be done better using media queries (would allow the UI to be dynamically responsive)
• Ths dialog is now always fixed