From de44f6c8e42ef080c3501b8a767e14951b784387 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 23 Feb 2021 04:35:14 -0600
Subject: [PATCH] notes: fix note sizing issues.

Fix issues with note sizing caused by the switch to `box-sizing: border-box`
in 19aea560. Note boxes have a 1px black border, which is counted as
part of the note box width when using border-box. This threw off sizing
and position calculations.

Also go back to 1px borders instead of 2px borders for unsaved and
selected notes. This also messed up note sizing.
---
 app/javascript/src/styles/specific/notes.scss | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss
index 08f877a3d..57a09751d 100644
--- a/app/javascript/src/styles/specific/notes.scss
+++ b/app/javascript/src/styles/specific/notes.scss
@@ -1,6 +1,7 @@
 .note-container {
   display: inline-block;
   position: relative;
+  box-sizing: content-box;
 
   &.hide-notes .note-box {
     visibility: hidden;
@@ -26,6 +27,8 @@
   }
 
   div.note-body, div.note-box.embedded div.note-box-inner-border {
+    box-sizing: content-box;
+
     h1, h2, h3, h4, h5, h6, a, span, div, blockquote, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
       line-height: 1.25;
     }
@@ -100,6 +103,7 @@
     line-height: 1.25;
     opacity: 0.5;
     z-index: 100;
+    box-sizing: content-box;
 
     /* Raise notes on hover so overlapping embedded notes are readable. */
     &:hover {
@@ -107,11 +111,11 @@
     }
 
     &.unsaved {
-      border: 2px solid var(--unsaved-note-box-border-color);
+      border: 1px solid var(--unsaved-note-box-border-color);
     }
 
     &.movable {
-      border: 2px solid var(--movable-note-box-border-color);
+      border: 1px solid var(--movable-note-box-border-color);
     }
 
     &.embedded {
@@ -137,11 +141,11 @@
 
       &.unsaved,
       &.out-of-bounds {
-        border: var(--unsaved-note-box-border);
+        border: 1px solid var(--unsaved-note-box-border-color);
       }
 
       &.movable {
-        border: var(--movable-note-box-border);
+        border: 1px solid var(--movable-note-box-border-color);
       }
 
       &:not(:hover) div.ui-resizable-handle {
@@ -150,7 +154,7 @@
     }
 
     &.note-box-highlighted {
-      outline: 2px solid var(--note-highlight-color);
+      outline: 1px solid var(--note-highlight-color);
     }
 
     div.ui-resizable-handle {
@@ -163,12 +167,13 @@
 div#note-preview {
   position: absolute;
   cursor: crosshair;
-  border: 2px solid var(--note-preview-border-color);
+  border: 1px solid var(--note-preview-border-color);
   opacity: 0.6;
   display: none;
   background: var(--note-preview-background);
   box-shadow: var(--shadow-lg);
   z-index: 250;
+  box-sizing: content-box;
 }
 
 div.note-edit-dialog {