Convert notes to use percentages instead of exact coordinates

- This allows for the note boxes to be easily resized
-- Now resizing the note container resizes all of the note boxes
-- The z-index and position values had to be adjusted for this
--- So that the note/preview boxes were still visible
--- So that the image was selectable with right clicks
- All of the inner box styles have been moved to the outer box
-- Now the inner box is only a container for the note body
- The always resize image option has been removed from user settings
-- The value still exists on the model for future rename/reuse
- The max width is set at 100% for responsive mode to fit the screen

app/javascript/src/styles/base/040_colors.css

@@ -113,11 +113,10 @@
   --note-body-background: #FFE;
   --note-body-text-color: var(--text-color);
   --note-body-border: 1px solid black;
-  --note-box-border: 1px solid white;
-  --note-box-background: transparent;
-  --note-box-inner-border: 1px solid black;
-  --unsaved-note-box-inner-border: 1px solid red;
-  --movable-note-box-inner-border: 1px solid green;
+  --note-box-border: 1px solid black;
+  --note-box-shadow: 0 0 0 1px white;
+  --unsaved-note-box-border: 1px solid red;
+  --movable-note-box-border: 1px solid green;
   --note-preview-border: 1px solid red;
   --note-preview-background: white;
   --note-highlight-color: blue;

app/javascript/src/styles/specific/notes.scss

@@ -1,6 +1,5 @@
 div#note-container {
   position: absolute;
-  z-index: 50;
 
   div.note-body {
     position: absolute;
@@ -71,6 +70,10 @@ div#note-container {
   }
 
   div.note-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
     position: absolute;
     border: var(--note-box-border);
     min-width: 5px;
@@ -78,24 +81,17 @@ div#note-container {
     width: 100px;
     height: 100px;
     cursor: move;
-    background: var(--note-box-background);
+    background: var(--note-body-background);
     line-height: 1.25;
     opacity: 0.5;
+    z-index: 100;
 
-    div.note-box-inner-border {
-      border: var(--note-box-inner-border);
-      background: var(--note-body-background);
-    }
-
-    div.note-box-inner-border.unsaved {
-      border: var(--unsaved-note-box-inner-border);
+    &.unsaved {
+      border: var(--unsaved-note-box-border);
     }
 
     &.movable {
-      div.note-box-inner-border,
-      div.note-box-inner-border.unsaved {
-        border: var(--movable-note-box-inner-border);
-      }
+      border: var(--movable-note-box-border);
     }
 
     &.embedded {
@@ -105,6 +101,7 @@ div#note-container {
 
       &.hovering {
         border: var(--note-box-border);
+        box-shadow: var(--note-box-shadow);
 
         &.editing,
         &.movable {
@@ -114,10 +111,6 @@ div#note-container {
         div.ui-resizable-handle {
           display: block;
         }
-
-        div.note-box-inner-border {
-          border: var(--note-box-inner-border);
-        }
       }
 
       &.editing,
@@ -125,29 +118,18 @@ div#note-container {
         opacity: 0.4;
       }
 
+      &.unsaved,
+      &.out-of-bounds {
+        border: var(--unsaved-note-box-border);
+      }
+
       &.movable {
-        div.note-box-inner-border,
-        div.note-box-inner-border.unsaved,
-        div.note-box-inner-border.out-of-bounds {
-          border: var(--movable-note-box-inner-border);
-        }
+        border: var(--movable-note-box-border);
       }
 
       div.ui-resizable-handle {
         display: none;
       }
-
-      div.note-box-inner-border {
-        text-align: center;
-        display: table-cell;
-        vertical-align: middle;
-        border: 1px solid transparent;
-      }
-
-      div.note-box-inner-border.unsaved,
-      div.note-box-inner-border.out-of-bounds {
-        border: var(--unsaved-note-box-inner-border);
-      }
     }
 
     &.note-box-highlighted {
@@ -162,6 +144,7 @@ div#note-preview {
   opacity: 0.6;
   display: none;
   background: var(--note-preview-background);
+  z-index: 100;
 }
 
 div.note-edit-dialog {

app/javascript/src/styles/specific/posts.scss

@@ -341,6 +341,12 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
+    /* This ensures the image appears above the note container, but beneath any notes. */
+    #image {
+      position: relative;
+      z-index: 50;
+    }
+
     .pool-name, .search-name {
       word-wrap: break-word;
     }

app/javascript/src/styles/specific/z_responsive.scss

@@ -92,6 +92,11 @@
     }
   }
 
+  img#image {
+    max-width: 100%;
+    height: auto;
+  }
+
   .user-disable-cropped-false {
     article.post-preview {
       width: 33.3%;