Don't trim long titles, and show them in more lines.

Reserve space for header icons, and so no layout occur when show that icons.

css/style.scss

@@ -34,11 +34,10 @@
     min-height: 150px;
     width: 250px;
     border-radius: 8px;
-    box-shadow: 0 4px 6px #c1c1c1;
 }
 
 .quicknote:hover {
-    box-shadow: 0px 0px 6px #808080;
+    box-shadow: 0px 0px 4px #808080;
 }
 
 #title-editable:empty:before {
@@ -95,11 +94,9 @@
 }
 
 #div-content .note-title {
-   margin-right: 52px;
    font-size: 18px;
    font-weight: bold;
-   text-overflow: ellipsis;
-   overflow: hidden;
+   overflow-wrap: break-word;
 }
 
 .note-content {
@@ -117,8 +114,9 @@
     background-size: 22px;
     min-width: 28px;
     min-height: 28px;
-    opacity: 0.54;
     border-radius: 50%;
+    -moz-transition: opacity 0.218s ease-in;
+    transition: opacity 0.218s ease-in;
 }
 
 .icon-header-note:hover {
@@ -127,12 +125,12 @@
 }
 
 .hide-header-icon {
-    display: none;
+    opacity: 0;
 }
 
 .fixed-header-icon,
 .show-header-icon {
-    display: block;
+    opacity: 0.54;
 }
 
 .noselect {
@@ -227,7 +225,7 @@ div[contenteditable="true"] {
 }
 
 #title-editable {
-    width: 90%;
+    width: 100%;
     background: none;
     color: unset;
     border: none;